/* ─── Cards ─── */
.card {
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
}

.card-header {
    padding: 18px 20px 6px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    /* Mobile etroit : le groupe d'actions (ex. "Reinitialiser" + "Ajouter un
       cours") passe sous le titre au lieu de deborder/etre coupe. Ne wrap que
       quand la place manque -> aucun changement sur desktop. */
    flex-wrap: wrap;
}

.card-title {
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-heading);
    font-size: var(--text-md);
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body {
    padding: 12px 20px 20px;
}

/* ═══════════════════════════════════════════════════════════════════
   (T34) Hero focal : consomme aujourd'hui par le seul Planificateur
   (.planner-hero, App._renderPlannerHero). Le Tableau de bord a quitte ce
   pattern pour ses trois niveaux (dashboard.css) : les parties qu'il etait
   seul a consommer (titre, motif, actions, stats) ont ete retirees.
   - data-severity (calm/soon/warn/urgent) drive l'accent border + couleur.
   - Greeting eyebrow + focal title/sub + 1 CTA inline.
   ═══════════════════════════════════════════════════════════════════ */

.dash-hero-inner {
  /* (Refonte "ecran calme", facon app Claude) En etat calme le hero ne vit
     plus dans une carte : il respire dans l'espace (fond + bordure
     transparents). La carte ne reapparait que pour signaler une severite
     (soon/warn/urgent -> border-color/box-shadow plus bas). */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}

@media (min-width: 720px) {
  .dash-hero-inner { padding: 26px 28px 22px; }
}

/* Severity drives accent : calm=neutre, soon=primary, warn=warning, urgent=danger. */
.dash-hero-inner[data-severity="soon"] {
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--border));
}

.dash-hero-inner[data-severity="warn"] {
  border-color: color-mix(in srgb, var(--color-warning) 50%, var(--border));
  background: var(--color-surface);
}

.dash-hero-inner[data-severity="urgent"] {
  border-color: var(--color-danger);
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-danger),
              0 16px 56px -22px color-mix(in srgb, var(--color-danger) 50%, transparent);
}

.dash-hero-greeting {
  margin-bottom: 14px;
}

.dash-hero-eyebrow {
  font-family: var(--font-display), sans-serif;
  font-size: var(--text-sm);
  font-weight: var(--weight-heading);
  color: var(--color-muted);
}

/* Bloc focal : icône + titre + sub + CTA inline (sur mobile : empile). */
.dash-hero-focal {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.dash-hero-focal-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-primary-text);
  transition: color var(--dur-base) var(--ease-out);
}

.dash-hero-inner[data-severity="warn"] .dash-hero-focal-icon {
  color: var(--color-warning);
}

.dash-hero-inner[data-severity="urgent"] .dash-hero-focal-icon {
  color: var(--color-danger);
}

.dash-hero-focal-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-hero-focal-title {
  font-family: var(--font-display), sans-serif;
  font-weight: var(--weight-display);
  font-size: clamp(var(--text-md), 3.4vw, var(--text-lg));
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);

  color: var(--color-text);
  /* Mobile : le titre s'enroule sur 2 lignes au lieu d'etre tronque
     ("Aucune urgenc..."). Sur desktop il tient sur une ligne, inchange. */
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dash-hero-focal-sub {
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-weight: var(--weight-emphasis);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dash-hero-focal-cta {
  background: var(--color-surface-soft);
  border: 0;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-emphasis);
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out);
  flex-shrink: 0;
}

.dash-hero-focal-cta:hover {
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
  transform: translateX(2px);
}

.dash-hero-inner[data-severity="urgent"] .dash-hero-focal-cta:hover {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}

/* Mobile : le CTA du hero focal (Voir / Planifier) passe sous le texte, en
   pleine largeur. Sinon il volait ~100px et le titre se retrouvait tronque
   ("Aucune session..." / "Examen Securite..."). Concerne le hero du Tableau
   de bord ET du Planificateur (memes classes). */
@media (max-width: 560px) {
  .dash-hero-focal-cta {
    flex-basis: 100%;
    justify-content: center;
    margin-top: 4px;
  }
}

/* ════════ Mode Coupe du monde ════════ */
.wc-panel {
  margin-bottom: 24px;
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}
.wc-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.wc-panel-icon { color: var(--color-primary); display: grid; place-items: center; }
.wc-panel-title { font-family: var(--font-display), sans-serif; font-weight: var(--weight-display); font-size: var(--text-base); color: var(--color-text); flex: 1; }
.wc-reminders { margin: 4px 12px 8px; }
.wc-list { display: flex; flex-direction: column; }
.wc-empty { padding: 16px; text-align: center; color: var(--color-muted); font-size: var(--text-sm); }

.wc-match {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--border);
}
.wc-match:first-child { border-top: 0; }
.wc-match.is-live { background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.wc-match-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.wc-side { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 1; }
.wc-side--away { justify-content: flex-end; }
.wc-flag { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.wc-flag--ph { background: var(--surface2); border-radius: var(--radius-xs); }
.low-bandwidth .wc-flag { display: none; }
.wc-team { font-size: var(--text-sm); font-weight: var(--weight-emphasis); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-vs { flex-shrink: 0; font-size: 11px; color: var(--color-muted); }
.wc-score { flex-shrink: 0; font-family: var(--font-display), sans-serif; font-weight: var(--weight-display); font-size: var(--text-md); color: var(--color-text); }
.wc-match-meta { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.wc-when { font-size: var(--text-xs); color: var(--color-muted); white-space: nowrap; }
.wc-badge { font-size: 10px; font-weight: var(--weight-heading); color: var(--color-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
.wc-badge--live { color: var(--color-danger); }
.wc-watch { font-size: var(--text-xs); font-weight: var(--weight-emphasis); color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.wc-watch:hover { text-decoration: underline; }

@media (max-width: 480px) {
  .wc-team { max-width: 72px; }
}

/* ── Coupe du monde : section emploi du temps (matchs par jour) ── */
.wc-sched {
  margin-bottom: 24px;
  border-radius: var(--radius);
  background: var(--color-surface);
  overflow: hidden;
}
.wc-sched-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.wc-sched-icon { color: var(--color-primary); display: grid; place-items: center; }
.wc-sched-title { font-family: var(--font-display), sans-serif; font-weight: var(--weight-display); font-size: var(--text-base); color: var(--color-text); }
.wc-sched-daylabel {
  padding: 8px 16px;
  font-size: var(--text-xs);
  font-weight: var(--weight-heading);
  color: var(--color-muted);
  background: var(--color-surface-soft);
}
.wc-slots { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.wc-slot-teams { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wc-flag--sm { width: 18px; height: 18px; object-fit: contain; }
.wc-live-dot { color: var(--color-danger); font-weight: var(--weight-heading); }

/* Bouton "Rejoindre la communaute" (WhatsApp). */
.wc-community {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 10px 12px 12px;
  padding: 11px;
  border-radius: var(--radius);
  background: var(--color-primary);
  color: var(--on-primary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-emphasis);
  text-decoration: none;
}
.wc-community:hover { filter: brightness(1.06); }

/* ─── Stat cards ─── */
.stat-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 18px 20px;
    position: relative;
    overflow: hidden;
    /* Easing custom — touche physique au survol, sans depasser le
       budget de rendu sur les telephones bas de gamme. */
    transition: transform var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
}

.stat-card:hover {
    transform: translateY(-1px);
    border-color: var(--green3);
    box-shadow: 0 4px 14px -8px color-mix(in srgb, var(--black) 18%, transparent);
}

.stat-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--green-dim);
    transform: translate(20px, 20px);
}

.stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--green-dim);
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    transition: transform var(--dur-base) var(--ease-out),
                background-color var(--dur-base) var(--ease-out);
}

.stat-card:hover .stat-icon {
    background: var(--green-glow);
}

.stat-value {
    font-family: var(--font-display), sans-serif;
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tight);
    font-weight: var(--weight-display);
    color: var(--text);
}

.stat-label {
    font-size: var(--text-xs);
    color: var(--muted);
    margin-top: 2px;
}

.stat-sub {
    font-size: var(--text-xs);
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-sub.up {
    color: var(--green-text);
}

.stat-sub.neutral {
    color: var(--muted);
}

/* Slots (cours du jour) — radius plus arrondi pour le langage friendly */
.slot {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius);
    background: var(--bg3);
    position: relative;
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-out),
                border-color var(--dur-base) var(--ease-out);
}

.slot:hover {
    border-color: var(--green3);
    background: var(--surface2);
}

.slot.active {
    border-color: var(--green);
    background: color-mix(in srgb, var(--green) 8%, var(--surface));
}

.slot.active .slot-time {
    color: var(--green-text);
}

.slot.past {
    color: var(--muted2);
}

.slot-time {
    font-family: var(--font-display), sans-serif;
    font-size: var(--text-xs);
    color: var(--green-text);
    font-weight: var(--weight-emphasis);
    min-width: 80px;
}

.slot-content {
    flex: 1;
    min-width: 0;
}

.slot-name {
    font-weight: var(--weight-emphasis);
    font-size: var(--text-sm);
    color: var(--text);
}

.slot-meta {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

.slot-code {
    font-size: 10px;
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--muted);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    margin-right: 4px;
}

.slot-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green);
    margin-top: 6px;
    flex-shrink: 0;
}

.slot-dot.study {
    background: var(--orange);
}

.slot-dot.rest {
    background: var(--muted2);
}

/* ─── Course list ─── */
/* Actions de l'en-tete Tes cours (credits + Ajouter un cours), construites
   par App.renderCourseList seulement quand il y a des cours. */
.courses-head-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.course-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.course-item {
    background: var(--bg3);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
    cursor: pointer;
}

.course-item:hover {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--course-color, var(--green3)) 35%, var(--border));
}

.ci-mark {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 88px;
}

.ci-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--course-color, var(--green));
    flex-shrink: 0;
}

.ci-code {
    font-family: var(--font-display), sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: color-mix(in srgb, var(--course-color, var(--green-text)) 50%, var(--text));
}

.ci-info {
    flex: 1;
    min-width: 0;
}

.ci-name {
    font-weight: var(--weight-emphasis);
    font-size: var(--text-sm);
}

.ci-meta {
    font-size: var(--text-xs);
    color: var(--muted);
    margin-top: 2px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ci-cr {
    display: flex;
    align-items: center;
    gap: 4px;
}

.credit-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

.ci-actions {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Chevron d'affordance : signale que la ligne s'ouvre (detail du cours), sans
   l'icone loupe trompeuse d'avant. Micro-interaction discrete au survol. */
.ci-chevron {
    color: var(--muted2);
    transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.course-item:hover .ci-chevron {
    color: var(--green-text);
}

/* ─── Session items ─── */
.session-color {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

.session-item {
    background: var(--bg3);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
}

.session-item:hover {
    background: var(--surface);
    border-color: color-mix(in srgb, var(--green3) 35%, var(--border));
}

.session-info {
    flex: 1;
    min-width: 0;
}

.session-name {
    font-weight: var(--weight-emphasis);
    font-size: var(--text-sm);
}

.session-when {
    font-size: var(--text-xs);
    color: var(--muted);
    margin-top: 2px;
}

.session-actions {
    display: flex;
    gap: 4px;
}

/* ─── Icon buttons (langage container Discord/Notion) ─── */
.icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--surface2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
    color: var(--muted);
}

.icon-btn:hover {
    background: var(--green-dim);
    color: var(--green-text);
}

.icon-btn:active {
    transform: scale(0.94);
}

.icon-btn.del:hover {
    background: var(--red-dim);
    color: var(--red);
}

/* ─── Mini calendrier ─── */
.cm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cm-month {
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-heading);
    font-size: var(--text-md);
}

.cm-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}

.cm-day-label {
    font-size: 10px;
    color: var(--muted2);
    padding: 4px 0;
    font-weight: var(--weight-emphasis);

}

.cm-day {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
    position: relative;
}

.cm-day:hover {
    background: var(--surface);
}

.cm-day.today {
    background: var(--green3);
    color: var(--on-primary);
    font-weight: var(--weight-heading);
}

.cm-day.selected {
    background: var(--green-dim);
    color: var(--green-text);
    font-weight: var(--weight-emphasis);
    border: 1px solid var(--green);
}

.cm-day.has-event::after {
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--green);
}

.cm-day.other-month {
    color: var(--muted2);
}

/* ─── Modales ─── */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Echelle des couches : variables.css (--z-*). Les surfaces BLOQUANTES
       (bande modale) gagnent toujours sur les feuilles qui les ouvrent
       (Apte, Kossivi, partage) : une boite de dialogue sous la surface
       appelante est invisible ET bloque le flux, elle attend un clic que
       personne ne peut donner. */
    z-index: var(--z-modale);
    padding: 20px;
    opacity: 0;
    /* visibility : hors de l'arbre d'accessibilite et de l'ordre de tabulation
       tant que la modale est fermee ; le delai laisse le fondu se finir.
       Voile opaque sans flou : pas de glassmorphism, et rien a composer
       sur un telephone modeste. */
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}

.modal-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
}

.modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: min(500px, 100%);
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.96) translateY(10px);
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
    box-shadow: var(--shadow);
    -webkit-overflow-scrolling: touch;
}

.modal-overlay.open .modal {
    transform: scale(1) translateY(0);
}

#modal-addCourse .modal,
#modal-editCourse .modal {
    max-width: min(540px, 100%);
}

.sheet-grabber {
    display: none;
    flex-shrink: 0;
    width: 36px;
    height: 4px;
    margin: 10px auto 2px;
    border-radius: var(--radius-pill);
    background: var(--muted2);
}

@media (max-width: 768px) {
    .modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .modal {
        max-width: 100%;
        max-height: min(92vh, 720px);
        border-radius: var(--radius) var(--radius) 0 0;
        border-bottom: 0;
        transform: translateY(100%);
        /* Feuille de bas d'ecran : course pleine hauteur, donc --dur-screen
           (doctrine distance parcourue, DESIGN.md). Le desktop centre reste
           sur --dur-base. */
        transition: transform var(--dur-screen) var(--ease-out), opacity var(--dur-screen) var(--ease-out);
    }

    .modal-overlay.open .modal {
        transform: translateY(0);
    }

    .sheet-grabber {
        display: block;
    }

    .modal::before {
        content: "";
        display: block;
        width: 36px;
        height: 4px;
        margin: 10px auto 2px;
        border-radius: var(--radius-pill);
        background: var(--muted2);
    }

    .modal-header {
        padding-top: 8px;
    }

    .modal-close,
    .modal-tool-btn {
        width: 44px;
        height: 44px;
        border-radius: var(--radius-sm);
    }
}

.modal-header {
    padding: 22px 24px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-heading);
    font-size: var(--text-md);
    min-width: 0;
}

.modal-header-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.modal-close,
.modal-tool-btn {
    width: 36px;
    height: 36px;
    background: var(--surface2);
    border: none;
    cursor: pointer;
    color: var(--muted);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
}

.modal-tool-btn:hover {
    color: var(--color-primary-strong);
    background: var(--color-primary-soft);
}

.modal-tool-btn:active {
    transform: scale(0.94);
}

.modal-close:hover {
    color: var(--red);
    background: var(--red-dim);
    transform: scale(1.06);
}

.modal-body {
    padding: 20px 24px;
}

.modal-footer {
    padding: 8px 24px 20px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ─── Modale de confirmation ─── */
/* Confirmation (UI.confirm) : son conteneur, son voile, sa pile et son
   animation sont ceux de la couche commune (section Couche, plus bas). */
.confirm-modal {
    text-align: center;
    padding-top: var(--space-2);
}

.confirm-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: var(--green3);
    background: var(--green-dim);
    border: 1px solid var(--green3);
}

.confirm-icon svg {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
}

/* Danger : icône avertissement sur fond chaud (lisible sur les 4 thèmes) */
.confirm-modal.danger .confirm-icon {
    background: var(--orange-dim);
    color: var(--orange);
    border-color: var(--orange3);
}

.confirm-modal:not(.danger) .confirm-icon {
    background: var(--green-dim);
}

.confirm-title {
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-heading);
    font-size: var(--text-md);
    color: var(--text);
    margin: 0 0 6px;
}

.confirm-message {
    font-size: var(--text-base);
    color: var(--muted);
    line-height: var(--leading-normal);
    margin: 0 0 16px;
}

.confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.confirm-actions .btn {
    min-width: 120px;
}

.confirm-note {
    font-size: var(--text-xs);
    color: var(--muted2);
    margin: var(--space-4) 0 0;
}

/* Au telephone, la confirmation est une feuille : boutons pleine largeur,
   l'action en haut, Annuler sous le pouce. */
@media (max-width: 719px) {
    .confirm-actions {
        flex-direction: column-reverse;
        gap: var(--space-2);
    }

    .confirm-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: var(--tap-min);
    }
}

.confirm-modal.danger .confirm-actions .btn-primary {
    background: var(--red);
}

.confirm-modal.danger .confirm-actions .btn-primary:hover {
    background: var(--red);
}

/* ─── Formulaires ─── */
.form-group {
    margin-bottom: 16px;
}

.form-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-emphasis);
    color: var(--muted);
    margin-bottom: 6px;

}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    min-height: 44px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--text);
    font-family: var(--font-body);
    /* 16px minimum : sous ce seuil les navigateurs mobiles zooment au focus
       et cassent la mise en page (DESIGN.md, section Formulaires). */
    font-size: var(--text-md);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
    outline: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--green3);
    box-shadow: 0 0 0 3px var(--green-dim);
}

.form-textarea {
    resize: vertical;
    min-height: 80px;
}

.form-select {
    cursor: pointer;
}

.form-select option {
    background: var(--bg2);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-error {
    font-size: var(--text-xs);
    color: var(--red);
    margin-top: 4px;
    display: none;
}

.form-error.show {
    display: block;
}

/* ─── Validation — champs invalides ─── */
.field-invalid {
    border-color: var(--red) !important;
    box-shadow: 0 0 0 3px var(--red-dim) !important;
}

/* ─── Help text / hints ─── */
/* Paragraphe d'aide place sous le titre d'une carte Settings (ou modale)
   pour expliquer le but du bloc. Auparavant ecrit en style="..." inline
   dans index.html (font-size, margin-bottom, color). Une classe semantique
   permet de garder l'intention dans le markup et de varier la taille
   responsively dans un seul endroit. */
.settings-hint {
    font-size: var(--text-sm);
    color: var(--muted);
    margin-bottom: 12px;
    line-height: var(--leading-normal);
    /* Mesure de lecture : 60 a 75 caracteres (DESIGN.md, Ecriture). */
    max-width: 68ch;
}

/* ─── Toasts ─── */
/* ─── Desktop (>900px) — bas droite, style macOS ─── */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    /* Bande toast : au-dessus de tout, y compris le tiroir Apte et les modales */
    z-index: calc(var(--z-toast) + 10);
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    align-items: flex-end;
}

/* ────────────────────────────────
   UI ZERO — Assistant (premium)
──────────────────────────────── */

.asst-settings-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

/* Preferences durables de voix de l'assistant dans la
   page Reglages. Reutilise les bascules .notif-toggle ; un filet les separe des
   selecteurs "Auto" du dessus. */
.asst-pref-toggles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 14px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
}

/* ─── Bouton assistant (FAB) : orbe legere "agent IA" + marque UpTe.
   Animation sobre (opacity/scale uniquement), coupee sur reseau lent
   et prefers-reduced-motion (priorite appareils modestes). ─── */
.asst-fab {
    display: none;
    position: fixed;
    right: max(16px, var(--safe-right));
    bottom: calc(var(--bottom-tabs-space) + var(--space-2) + var(--safe-bottom));
    z-index: calc(var(--z-barre) + 5);
    width: var(--fab-size);
    height: var(--fab-size);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    background: transparent;
    box-shadow: var(--shadow);
    align-items: center;
    justify-content: center;
    isolation: isolate;
    transition: transform var(--dur-fast) var(--ease-out);
}

.asst-fab-orb {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.asst-fab-core {
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    background: var(--green2);
    box-shadow: inset 0 1px 0 var(--fab-sheen);
}

.asst-fab-ring {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1.5px solid color-mix(in srgb, var(--green3, var(--green)) 55%, transparent);
    pointer-events: none;
}

/* Anneaux statiques : le bouton ne respire plus en boucle (ambiance sans
   travail, et un compositeur sollicite en permanence sur telephone modeste).
   Le mouvement n'arrive qu'avec un etat : ecoute, parole. */
.asst-fab-ring--inner {
    inset: 6px;
    opacity: 0.45;
}

.asst-fab-mark {
    position: relative;
    z-index: calc(var(--z-base) + 1);
    width: 24px;
    height: 24px;
    color: var(--on-primary);
    filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--black) 18%, transparent));
}

.asst-fab:hover .asst-fab-core {
    background: var(--green);
}

.asst-fab:active {
    transform: scale(0.96);
}

@keyframes asst-fab-ring {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.85; transform: scale(1.06); }
}

.asst-fab--listening .asst-fab-core {
    animation: asst-fab-listen 1.6s ease-in-out infinite;
}

.asst-fab--listening .asst-fab-ring--outer {
    animation: asst-fab-ring 1.6s ease-in-out infinite;
}

@keyframes asst-fab-listen {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.06); filter: brightness(1.08); }
}

.low-bandwidth .asst-fab-core,
.low-bandwidth .asst-fab-ring {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .asst-fab-core,
    .asst-fab-ring {
        animation: none;
    }
}

.asst-fab:not([hidden]) {
    display: inline-flex;
}

/* Telephone et tablette : l'orbe se pose dans la case qui lui est reservee
   au bout de la barre d'onglets (utilities.css). Elle ne flotte plus sur le
   contenu, ne couvre ni champ, ni bouton, ni onglet. */
@media (max-width: 900px) {
    .asst-fab:not([hidden]) {
        right: calc(var(--safe-right) + var(--space-2));
        bottom: calc(var(--safe-bottom) + var(--space-1));
        width: var(--fab-size-barre);
        height: var(--fab-size-barre);
        box-shadow: none;
    }

    /* Clavier ouvert : l'orbe part avec la barre (couche.js). */
    .clavier-ouvert .asst-fab:not([hidden]) {
        display: none;
    }
}

/* Bureau : pas de barre d'onglets, Apte a sa ligne en tete de la barre
   laterale (.sidebar-apte, layout.css). L'orbe flottante disparait. */
@media (min-width: 901px) {
    .asst-fab:not([hidden]) {
        display: none;
    }
}

/* L'orbe est un enfant de <body>, frere de #app : le seul selecteur
   descendant ne l'atteignait jamais, et sur telephone elle recouvrait le
   bouton Quitter du salon tant qu'Apte n'avait pas ete charge. */
.app--room-focus .asst-fab,
.app--room-focus ~ .asst-fab {
    display: none !important;
}

/* Capsule "appel en cours" visible : elle integre l'orbe Apte, le FAB
   autonome disparait (un seul objet flottant, zero doublon/collision).
   CSS prioritaire : peu importe qui toggle fab.hidden ensuite. */
body.has-call-pill .asst-fab {
    display: none !important;
}

/* Meme regle pour la pastille d'ecoute : sur mobile elle vit
   dans la meme bande que la capsule (bottom ~80). L'etat d'ecoute est
   reporte sur l'orbe de la capsule (pulse), aucune double surface. */
body.has-call-pill .asst-listen-dock {
    display: none !important;
}

/* ─── Indicateur d'ecoute persistant ("Apte ecoute") ───────────────────────
   Quand une Conversation tourne et que le panneau est ferme, une pastille
   reste visible (facon barre "partage d'ecran" du navigateur) pour qu'on
   SACHE que le micro est pris. Cliquable -> ouvre le panneau ; bouton stop ->
   coupe la conversation. Desktop : centre en haut (zone vide de la barre) ;
   mobile : centre en bas, au-dessus de la barre d'onglets. */
.asst-listen-dock {
    position: fixed;
    top: max(10px, var(--safe-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: calc(var(--z-feuille) + 50);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 13px;
    border-radius: var(--radius-pill);
    background: var(--surface);
    border: 1px solid var(--green3);
    box-shadow: var(--shadow);
}

.asst-listen-dock[hidden] {
    display: none;
}

.asst-listen-dock .ald-main {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    padding: 0;
}

.ald-text {
    display: flex;
    flex-direction: column;
    line-height: var(--leading-tight);
    text-align: left;
}

.ald-text b {
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-heading);
    font-size: var(--text-xs);
    color: var(--text);
}

.ald-text small {
    font-size: var(--text-xs);
    color: var(--muted);
}

/* Ondes vivantes */
.ald-wave {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    height: 18px;
}

.ald-mic-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: var(--green3);
    flex-shrink: 0;
}

.ald-mic-icon svg {
    width: 16px;
    height: 16px;
}

.asst-listen-dock.is-audio-active .ald-mic-icon {
    display: none;
}

.asst-listen-dock.is-audio-active .ald-wave {
    display: inline-flex;
}

.asst-listen-dock:not(.is-audio-active):not(.is-active) .ald-wave {
    display: none;
}

.ald-wave i {
    width: 3px;
    height: calc(5px + var(--ald-amp, 0) * 14px);
    border-radius: var(--radius-xs);
    background: var(--green3);
    transition: height 0.06s linear, opacity 0.06s linear;
    opacity: calc(0.45 + var(--ald-amp, 0) * 0.55);
}

.ald-wave i:nth-child(2) { animation-delay: 0.15s; }
.ald-wave i:nth-child(3) { animation-delay: 0.3s; }
.ald-wave i:nth-child(4) { animation-delay: 0.45s; }
.ald-wave i:nth-child(5) { animation-delay: 0.6s; }

@keyframes ald-wave {
    0%, 100% { height: 5px; opacity: 0.5; }
    50% { height: 16px; opacity: 1; }
}

/* Etat conversation active (dictee) : ondes plus rapides, vert plein. */
.asst-listen-dock.is-active {
    border-color: var(--green);
}

.asst-listen-dock.is-active .ald-wave i {
    background: var(--green);
}

/* Halo "Apte parle" : respire avec l'amplitude reelle de la voix de synthese
   (--ald-amp pose par _renderWave). Couleur translucide thematisee (--green-glow). */
.asst-listen-dock.is-speaking {
    border-color: var(--green);
    box-shadow: 0 0 calc(6px + var(--ald-amp, 0) * 16px)
        calc(1px + var(--ald-amp, 0) * 6px) var(--green-glow);
    transition: box-shadow 0.07s linear;
}

@media (prefers-reduced-motion: reduce) {
    .asst-listen-dock.is-speaking {
        box-shadow: 0 0 8px 1px var(--green-glow);
    }
}

/* Indicateur "Apte parle" VISIBLE dans le panneau ouvert. Le dock d'ecoute
   (.asst-listen-dock) est masque quand le panneau est ouvert, donc en
   conversation rien ne montrait qu'Apte parlait. Barres animees en CSS pur
   (fiable meme sans flux d'amplitude), activees par .is-speaking sur le panneau
   (pose/retire dans _speak). */
.asst-talk-wave {
    display: none;
    align-items: flex-end;
    gap: 3px;
    height: 14px;
    margin-left: 2px;
}

.asst-panel.is-speaking .asst-talk-wave {
    display: inline-flex;
}

.asst-talk-wave i {
    width: 3px;
    height: 5px;
    border-radius: var(--radius-xs);
    background: var(--green);
    animation: asst-talk-wave 0.9s ease-in-out infinite;
}

.asst-talk-wave i:nth-child(2) { animation-delay: 0.15s; }
.asst-talk-wave i:nth-child(3) { animation-delay: 0.3s; }
.asst-talk-wave i:nth-child(4) { animation-delay: 0.45s; }

@keyframes asst-talk-wave {
    0%, 100% { height: 5px; opacity: 0.55; }
    50% { height: 14px; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .asst-talk-wave i { animation: none; height: 10px; opacity: 0.9; }
}

/* Slider de sensibilite du barge-in (tiroir voix). Couleurs via tokens
   uniquement (pas de hex en composant). */
.asst-drawer-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    margin: 8px 0 2px;
    border-radius: var(--radius-pill);
    background: var(--surface2);
    border: 1px solid var(--border);
    outline: none;
    cursor: pointer;
}

.asst-drawer-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid var(--bg);
    cursor: pointer;
}

.asst-drawer-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--green);
    border: 2px solid var(--bg);
    cursor: pointer;
}

.asst-drawer-range:focus-visible {
    box-shadow: 0 0 0 3px var(--green-glow);
}

.asst-drawer-hint {
    display: block;
    margin-top: 4px;
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--muted);
}

/* ── Scene conversation : orbe audio-reactif, 100% CSS/SVG (offline), identite
   UpTe (vert, dark). Visible seulement quand la conversation est active
   (.asst-panel--conv), a la place du journal + composer. ── */
.asst-conv-stage {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px;
    text-align: center;
    --amp: 0;
}
.asst-panel--conv .asst-conv-stage {
    display: flex;
}
.asst-panel--conv .asst-log,
.asst-panel--conv .asst-bottom {
    display: none;
}

.asst-orb {
    display: grid;
    place-items: center;
    width: 170px;
    height: 170px;
}
.asst-orb > * {
    grid-area: 1 / 1;
}
.asst-orb-core {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: var(--green2);
    box-shadow: 0 0 calc(24px + var(--amp, 0) * 64px)
        calc(4px + var(--amp, 0) * 16px) var(--green-glow);
    transform: scale(calc(1 + var(--amp, 0) * 0.3));
    transition: transform 0.08s linear, box-shadow 0.08s linear;
}
.asst-orb-ring {
    border-radius: 50%;
    border: 1.5px solid var(--green3);
    opacity: 0.4;
}
.asst-orb-ring--1 { width: 112px; height: 112px; }
.asst-orb-ring--2 { width: 140px; height: 140px; opacity: 0.26; }
.asst-orb-ring--3 { width: 170px; height: 170px; opacity: 0.16; }

/* Etat ecoute : respiration douce (CSS pur). */
.asst-conv-stage.is-listening .asst-orb-core {
    animation: asst-orb-breathe 3.2s ease-in-out infinite;
}
.asst-conv-stage.is-listening .asst-orb-ring {
    animation: asst-orb-pulse 3.2s ease-in-out infinite;
}
.asst-conv-stage.is-listening .asst-orb-ring--2 { animation-delay: 0.4s; }
.asst-conv-stage.is-listening .asst-orb-ring--3 { animation-delay: 0.8s; }
@keyframes asst-orb-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
@keyframes asst-orb-pulse {
    0%, 100% { transform: scale(0.98); }
    50% { transform: scale(1.08); }
}

.asst-conv-state {
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-heading);
    font-size: var(--text-md);
    color: var(--text);
}
.asst-conv-text {
    font-size: var(--text-base);
    color: var(--muted);
    max-width: 80%;
    line-height: var(--leading-normal);
    min-height: 1.4em;
}
.asst-conv-stop {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    cursor: pointer;
    transition: background-color var(--dur-fast), border-color var(--dur-fast);
}
.asst-conv-stop:hover {
    border-color: var(--green);
}
.asst-conv-stop svg {
    width: 16px;
    height: 16px;
}

@media (prefers-reduced-motion: reduce) {
    .asst-conv-stage.is-listening .asst-orb-core,
    .asst-conv-stage.is-listening .asst-orb-ring {
        animation: none;
    }
}

.low-bandwidth .asst-listen-dock.is-speaking {
    box-shadow: none;
}

.apte-voice-status {
    font-size: var(--text-xs);
    font-weight: var(--weight-emphasis);
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    background: var(--surface2);
    color: var(--text);
}

.apte-voice-status[data-kind="https"] {
    border-color: var(--orange);
    color: var(--text);
}

.apte-voice-status[data-kind="listening"] {
    border-color: var(--green3);
}

.apte-settings--focus {
    outline: 2px solid var(--green3);
    outline-offset: 3px;
    animation: apte-settings-pulse 0.9s ease 2;
}

@keyframes apte-settings-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--green-glow); }
    50% { box-shadow: 0 0 0 6px transparent; }
}

.asst-toolbar-btn.asst-toolbar-btn--flash {
    color: var(--green3);
    background: var(--green-dim);
}

.ald-stop {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.ald-stop:hover {
    color: var(--red);
    border-color: var(--red);
    background: var(--surface);
}

.ald-stop svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 900px) {
    .asst-listen-dock {
        top: auto;
        bottom: calc(var(--bottom-tabs-space) + var(--space-1) + var(--safe-bottom));
    }
}

.app--room-focus .asst-listen-dock,
.app--room-focus ~ .asst-listen-dock {
    display: none !important;
}

.low-bandwidth .ald-wave i {
    animation: none;
    height: 11px;
    opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
    .ald-wave i {
        animation: none;
        height: 11px;
        opacity: 0.9;
    }
}

.asst-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-feuille) + 60);
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out);
    background: var(--overlay-scrim);
}


.asst-overlay.open {
    opacity: 1;
    pointer-events: all;
}

html.asst-open {
    overflow: hidden;
    overscroll-behavior: none;
}

html.asst-open body {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
}

.asst-panel {
    width: min(680px, 100%);
    height: min(78vh, 820px);
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
    transform: translateY(8px) scale(.985);
    transition: transform var(--dur-base) var(--ease-out);
    position: relative;
}

/* Bureau : une fenetre centree, comme les autres fenetres de la couche.
   En plein ecran, la conversation tenait au milieu de 1280 px de vide. */
@media (min-width: 901px) {
    .asst-panel {
        width: min(760px, 100%);
        height: min(86vh, 880px);
        max-height: none;
        border-radius: var(--radius-lg);
    }
}

.asst-overlay.open .asst-panel {
    transform: translateY(0) scale(1);
}

.asst-top {
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
    flex-shrink: 0;
}

.asst-title {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Icône type Heroicons / react-icons — marque assistant */
.asst-mark {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--green3);
    background: var(--green-dim);
    border: 1px solid var(--border);
}

.asst-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.asst-icon--sm {
    width: 18px;
    height: 18px;
}

.asst-close {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.asst-close:hover {
    color: var(--text);
    border-color: var(--border);
    background: var(--surface2);
}

.asst-close-label {
    display: none;
}

.asst-title-text {
    min-width: 0;
}

.asst-title-text b {
    display: block;
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-display);
    color: var(--text);
    font-size: var(--text-base);
    line-height: var(--leading-tight);
}

.asst-title-text span {
    display: block;
    color: var(--muted);
    font-size: var(--text-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pastille d'etat et anneau de quota cote a cote. */
.asst-etat {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}

.asst-quota {
    flex: none;
    display: inline-grid;
    place-items: center;
    width: var(--tap-min);
    height: var(--tap-min);
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    cursor: pointer;
}

.asst-quota[hidden] {
    display: none;
}

.asst-quota:hover {
    background: var(--surface2);
}

.asst-quota:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: -2px;
}

.asst-quota svg {
    width: 20px;
    height: 20px;
    transform: rotate(-90deg);
}

.asst-quota__piste,
.asst-quota__arc {
    fill: none;
    stroke-width: 3;
}

.asst-quota__piste {
    stroke: var(--border);
}

/* L'arc porte l'information : texte d'accent, 4,5:1 au moins sur la
   surface du panneau dans les quatre themes. */
.asst-quota__arc {
    stroke: var(--green-text);
    stroke-linecap: round;
    transition: stroke-dashoffset var(--dur-slow) var(--ease-out);
}

/* Recharge apres epuisement : couleur neutre, ce n'est pas du quota. */
.asst-quota--recharge .asst-quota__arc {
    stroke: var(--muted2);
}

.low-bandwidth .asst-quota__arc {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .asst-quota__arc {
        transition: none;
    }
}

.asst-quota-detail__texte {
    margin: 0;
    padding: var(--space-2);
    max-width: 260px;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text);
}

.asst-status-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    margin: 0;
    padding: 4px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
    text-align: left;
    max-width: 100%;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.asst-status-pill:hover,
.asst-status-pill[aria-expanded="true"] {
    border-color: var(--border);
    background: var(--surface2);
}

.asst-status-pill #asstBadge,
.asst-mode-badge {
    font-size: 11px;
    color: var(--muted);
    line-height: var(--leading-tight);
    font-weight: var(--weight-emphasis);
}

.asst-mode-badge[data-state="local"] {
    color: var(--muted);
}

.asst-mode-badge[data-state="deep"] {
    color: var(--green3);
}

.asst-mode-badge[data-state="deep-empty"] {
    color: var(--orange3);
}

.asst-status-pill[data-mode="deep"] {
    border-color: var(--green-dim);
}

.asst-status-pill[data-mode="deep-empty"] {
    border-color: var(--orange-dim);
}

.asst-status-line {
    font-size: var(--text-xs);
    color: var(--green3);
    line-height: var(--leading-tight);
}

.asst-status-pill[data-kind="https"] .asst-status-line,
.asst-status-line[data-kind="https"] {
    color: var(--orange3, var(--orange));
}

.asst-status-pill[data-kind="listening"] .asst-status-line,
.asst-status-line[data-kind="listening"] {
    color: var(--green-text);
}

.asst-panel--drawer-open {
    overflow: hidden;
}

.asst-panel--drawer-open .asst-log,
.asst-panel--drawer-open .asst-bottom,
.asst-panel--drawer-open .asst-conv-stage {
    overflow: hidden;
    pointer-events: none;
    touch-action: none;
}

.asst-drawer-scrim {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-base) + 4);
    background: var(--overlay-scrim);
    border: 0;
    padding: 0;
    cursor: pointer;
}

.asst-drawer-scrim[hidden] {
    display: none;
}

.asst-voice-drawer {
    position: absolute;
    top: 0;
    right: 0;
    z-index: calc(var(--z-base) + 5);
    width: min(420px, 92%);
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--border);
    background: var(--surface);
    box-shadow: -8px 0 24px var(--green-glow);
    transform: translateX(100%);
    /* Tiroir a course pleine (bord droit en desktop, pleine hauteur en
       mobile) : --dur-screen par doctrine distance parcourue. */
    transition: transform var(--dur-screen) var(--ease-out);
}

.asst-drawer-grabber {
    display: none;
    flex-shrink: 0;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: var(--radius-pill);
    background: var(--muted2);
}

@media (max-width: 900px) {
    .asst-voice-drawer {
        top: auto;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: auto;
        max-height: min(88vh, 560px);
        border-left: 0;
        border-top: 1px solid var(--border);
        border-radius: var(--radius) var(--radius) 0 0;
        box-shadow: 0 -10px 32px var(--green-glow);
        transform: translateY(100%);
        padding-bottom: var(--safe-bottom);
    }

    .asst-panel--drawer-open .asst-voice-drawer:not([hidden]) {
        transform: translateY(0);
    }

    .asst-drawer-grabber {
        display: block;
    }

    .asst-drawer-close {
        width: 44px;
        height: 44px;
    }
}

.asst-voice-drawer[hidden] {
    display: none;
}

@media (min-width: 901px) {
    .asst-panel--drawer-open .asst-voice-drawer:not([hidden]) {
        transform: translateX(0);
    }
}

.asst-drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg2);
    flex-shrink: 0;
}

.asst-drawer-title {
    display: block;
    font-family: var(--font-display), sans-serif;
    font-size: var(--text-base);
    font-weight: var(--weight-heading);
    color: var(--text);
}

.asst-drawer-sub {
    margin: 4px 0 0;
    font-size: var(--text-xs);
    color: var(--green3);
}

.asst-drawer-sub[data-kind="https"] {
    color: var(--orange3, var(--orange));
}

.asst-drawer-close {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    flex-shrink: 0;
}

.asst-drawer-close:hover {
    color: var(--text);
    background: var(--surface2);
}

.asst-drawer-close svg {
    width: 16px;
    height: 16px;
}

.asst-drawer-body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 10px 14px calc(16px + var(--safe-bottom));
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.asst-drawer-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.asst-drawer-section--nested {
    margin-top: 4px;
}

.asst-drawer-section-title {
    margin: 0;
    padding: 0 4px;
    font-size: var(--text-xs);
    font-weight: var(--weight-emphasis);
    color: var(--muted);
}

.asst-drawer-group {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius);
    background: var(--surface2);
    overflow: hidden;
}

.asst-drawer-group .asst-drawer-row {
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
}

.asst-drawer-group .asst-drawer-row:last-child {
    border-bottom: 0;
}

.asst-drawer-field--inset {
    padding: 10px 12px;
    gap: 8px;
    border-bottom: 1px solid var(--border);
}

.asst-drawer-group .asst-drawer-field--inset:last-child {
    border-bottom: 0;
}

.asst-drawer-advanced {
    border: 0;
    margin: 0;
    padding: 0;
}

.asst-drawer-advanced-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface2);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-emphasis);
    cursor: pointer;
    user-select: none;
}

.asst-drawer-advanced-summary::-webkit-details-marker {
    display: none;
}

.asst-drawer-advanced-summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--muted);
    border-bottom: 2px solid var(--muted);
    transform: rotate(45deg);
    transition: transform var(--dur-base) var(--ease-out);
    flex-shrink: 0;
}

.asst-drawer-advanced[open] .asst-drawer-advanced-summary::after {
    transform: rotate(-135deg);
}

.asst-drawer-advanced-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.asst-drawer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    background: var(--bg2);
    cursor: pointer;
}

.asst-drawer-row-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.asst-drawer-row-text strong {
    font-size: var(--text-sm);
    color: var(--text);
}

.asst-drawer-beta {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--radius-pill);
    font-size: 9px;
    font-weight: var(--weight-heading);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    vertical-align: middle;
    color: var(--green-text);
    background: var(--green-dim);
}

.asst-drawer-row-text small {
    font-size: var(--text-xs);
    color: var(--muted);
}

.asst-drawer-row input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.asst-drawer-switch {
    width: 38px;
    height: 22px;
    border-radius: var(--radius-pill);
    background: var(--surface2);
    border: 1px solid var(--border);
    position: relative;
    flex-shrink: 0;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.asst-drawer-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.asst-drawer-row:has(input:checked) .asst-drawer-switch {
    background: var(--green-dim);
    border-color: var(--green3);
}

.asst-drawer-row:has(input:checked) .asst-drawer-switch::after {
    transform: translateX(16px);
    background: var(--green3);
}

.asst-drawer-row:has(input:disabled) {
    opacity: 0.55;
    cursor: not-allowed;
}

.asst-drawer-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.asst-drawer-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-emphasis);
    color: var(--text);
}

.asst-drawer-link {
    margin-top: 4px;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--green3);
    font-size: var(--text-xs);
    font-weight: var(--weight-emphasis);
    cursor: pointer;
    text-align: center;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.asst-drawer-link:hover {
    background: var(--green-dim);
    border-color: var(--green3);
}

.asst-drawer-section--nested {
    gap: 6px;
    padding-top: 0;
    border-top: 0;
    margin-top: 4px;
}

.asst-memory-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.asst-memory-empty {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--muted);
    line-height: var(--leading-normal);
    padding: 8px 2px;
}

.asst-memory-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--surface2);
}

.asst-memory-text {
    flex: 1;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--text);
    word-break: break-word;
}

.asst-memory-del {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.asst-memory-del:hover {
    color: var(--text);
    background: var(--surface);
}

.asst-memory-clear {
    margin-top: 2px;
    color: var(--muted);
    font-size: var(--text-sm);
}

.asst-memory-clear:hover {
    color: var(--text);
    background: var(--surface2);
    border-color: var(--border);
}

.asst-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.asst-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
}

.asst-toolbar-btn {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    user-select: none;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.asst-toolbar-btn input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.asst-toolbar-icon {
    width: 18px;
    height: 18px;
    pointer-events: none;
}

.asst-toolbar-btn:hover {
    color: var(--text);
    background: var(--surface2);
}

.asst-toolbar-btn:has(input:checked),
.asst-toolbar-btn.is-active {
    color: var(--green3);
    background: var(--green-dim);
}

.asst-toolbar-btn input:checked ~ .asst-toolbar-icon {
    color: var(--green3);
}

.asst-log {
    flex: 1;
    min-height: 0;
    padding: 16px 18px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    background: var(--bg2);
}

.asst-msg {
    display: flex;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
}

.asst-log:has(.asst-msg.assistant:only-child) {
    justify-content: center;
}

.asst-msg.user { justify-content: flex-end; }
.asst-msg.assistant { justify-content: flex-start; }

.asst-bubble {
    max-width: min(520px, 94%);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    background: var(--surface);
    color: var(--text);
    line-height: var(--leading-normal);
    font-size: var(--text-sm);
}

.asst-msg.user .asst-bubble {
    background: var(--surface);
    border-color: var(--green3);
    box-shadow: inset 0 0 0 1px var(--green-dim);
}

.asst-msg.system .asst-bubble {
    border-color: var(--red);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--red-dim);
}

.asst-bubble strong { color: var(--text); font-weight: var(--weight-emphasis); }
.asst-bubble em { color: var(--muted); font-style: italic; }

/* ═══ Contenu Markdown de l'agent — formatage façon Claude ═══ */
.asst-md {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);

    word-break: break-word;
}

.asst-md > :first-child { margin-top: 0; }
.asst-md > :last-child { margin-bottom: 0; }

.asst-md p {
    margin: 0 0 0.7rem;
}

/* Titres */
.asst-md .asst-h {
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-heading);
    color: var(--text);
    line-height: var(--leading-normal);
    margin: 1.1rem 0 0.5rem;
}

.asst-md .asst-h2 { font-size: 1.25em; }
.asst-md .asst-h3 { font-size: 1.12em; }
.asst-md .asst-h4 { font-size: 1em; color: var(--muted); text-transform: none; }

/* Listes */
.asst-list {
    margin: 0.35rem 0 0.75rem;
    padding-left: 1.35rem;
    color: var(--text);
}

.asst-list { list-style: disc; }
.asst-list.asst-ol { list-style: decimal; }

.asst-list li {
    margin-bottom: 0.35rem;
    padding-left: 0.15rem;
}

.asst-list li::marker { color: var(--green3); }
.asst-list li:last-child { margin-bottom: 0; }

/* Citations */
.asst-quote {
    margin: 0.6rem 0;
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-sm);
    background: var(--surface2);
    color: var(--muted);
    font-style: italic;
}

/* Separateur */
.asst-hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
}

/* Liens */
.asst-md a {
    color: var(--green3);
    text-decoration: none;
    border-bottom: 1px solid var(--green-dim);
}

.asst-md a:hover { border-bottom-color: var(--green3); }

/* Code inline */
.asst-icode {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: var(--bg3);
    border: 1px solid var(--border);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: 0.88em;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ─── Bloc de code (en-tête langage + bouton Copier, façon Claude) ─── */
.asst-codeblock {
    margin: 0.75rem 0;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg3);
}

.asst-codeblock-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 8px 5px 12px;
    background: var(--surface2);
    border-bottom: 1px solid var(--border);
}

.asst-codeblock-lang {
    font-family: var(--font-display), sans-serif;
    font-size: var(--text-xs);
    font-weight: var(--weight-emphasis);
    color: var(--muted);
}

.asst-codeblock-copy {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-emphasis);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.asst-codeblock-copy:hover {
    color: var(--text);
    border-color: var(--green3);
}

.asst-codeblock-copy.done {
    color: var(--green3);
    border-color: var(--green3);
    background: var(--green-dim);
}

.asst-code {
    margin: 0;
    padding: 12px 14px;
    overflow-x: auto;
    background: transparent;
    border: 0;
}

.asst-code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--text);
    white-space: pre;
}

/* hljs injecte un background/color via ses themes — on le neutralise pour conserver le theme app. */
.asst-code .hljs { background: transparent; color: inherit; }

.asst-bottom {
    flex-shrink: 0;
    padding: 12px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.asst-bottom-inner {
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.asst-live-transcript {
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    color: var(--muted);
    padding: 6px 4px 0;
    min-height: 0;
}

.asst-live-transcript[hidden] {
    display: none;
}

.asst-live-transcript--tts {
    display: inline-block;
    align-self: flex-start;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--bg2);
    font-size: var(--text-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 1.6em;
}

.asst-code--draft {
    border-style: dashed;
    opacity: 0.92;
}

.asst-composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 10px 10px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg2);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.asst-composer:focus-within {
    border-color: var(--green3);
    box-shadow: 0 0 0 3px var(--green-dim);
}

.asst-composer-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.asst-composer-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}

.asst-composer-btn:hover {
    color: var(--text);
    background: var(--surface2);
}

.asst-composer-btn--send {
    color: var(--on-primary);
    background: var(--green3);
}

.asst-composer-btn--send:hover {
    background: var(--green2);
    color: var(--on-primary);
}

.asst-composer-btn.asst-btn--muted {
    opacity: 0.55;
    cursor: help;
}

.asst-composer-btn.asst-btn--recording {
    color: var(--red);
    background: var(--red-dim);
}

.asst-composer-btn.asst-btn--busy {
    opacity: 0.5;
    pointer-events: none;
}

.asst-composer-hint {
    margin: 0;
    padding: 0 4px;
    font-size: var(--text-xs);
    color: var(--muted2, var(--muted));
    text-align: center;
}

.asst-input {
    flex: 1;
    min-height: 36px;
    max-height: 120px;
    resize: none;
    border: 0;
    background: transparent;
    color: var(--text);
    padding: 6px 0;
    outline: none;
    font-family: inherit;
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.asst-input::placeholder {
    color: var(--muted2, var(--muted));
    opacity: 1;
}

.asst-input:focus {
    border-color: transparent;
    box-shadow: none;
}

/* Legacy boutons (enregistrement Whisper PTT) */
.asst-btn {
    height: 44px;
    border-radius: var(--radius-sm);
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
    flex-shrink: 0;
}

.asst-btn.primary {
    background: var(--green3);
    color: var(--on-primary);
    border-color: transparent;
}

.asst-btn:hover {
    border-color: var(--green3);
}

.asst-btn.primary:hover {
    background: var(--green2);
}

.asst-btn--icon {
    width: 44px;
    padding: 0;
}

.asst-btn--send {
    padding: 0 14px 0 16px;
}

.asst-send-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-emphasis);

}

@media (max-width: 380px) {
    .asst-send-label {
        display: none;
    }

    .asst-btn--send {
        width: 44px;
        padding: 0;
        justify-content: center;
    }
}

/* Variante visuelle : la dictée peut être indisponible mais le bouton reste clicable pour l’aide */
.asst-btn.asst-btn--muted {
    opacity: 0.72;
    border-style: dashed;
    cursor: help;
}

.asst-btn.asst-btn--recording {
    border-color: var(--red);
    color: var(--red);
    box-shadow: 0 0 0 3px var(--red-dim);
    animation: asst-pulse-rec 1.1s ease-in-out infinite;
}

.asst-btn.asst-btn--busy {
    opacity: 0.65;
    pointer-events: none;
}

.asst-msg--typing .asst-bubble--typing {
    color: var(--muted);
    font-size: var(--text-sm);
}

.asst-typing-dots::after {
    content: "";
    display: inline-block;
    width: 0.45em;
    animation: asst-dots 1.2s steps(4, end) infinite;
}

@keyframes asst-dots {
    0% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75% { content: "..."; }
}

.asst-bubble--streaming::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--green);
    animation: asst-cursor 0.9s step-end infinite;
}

.asst-bubble--karaoke {
    min-height: 1.5em;
}

@keyframes asst-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.asst-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.asst-action-chip {
    border: 1px solid var(--border);
    background: var(--surface2);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: var(--weight-emphasis);
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.asst-action-chip:hover {
    background: var(--green-dim);
    border-color: var(--green3);
}

.asst-action-chip--primary {
    background: var(--green3);
    border-color: var(--green3);
    color: var(--on-primary);
}

.asst-action-chip--primary:hover {
    background: var(--green2);
    border-color: var(--green2);
}

@keyframes asst-pulse-rec {
    0%, 100% { box-shadow: 0 0 0 3px var(--red-dim); }
    50% { box-shadow: 0 0 0 8px var(--red-dim); }
}

@media (max-width: 600px) {
    .asst-overlay {
        padding: 0;
        place-items: stretch;
    }

    .asst-overlay.asst-overlay--vv-active {
        inset: auto;
        left: 0;
        width: 100%;
        right: 0;
        bottom: auto;
    }

    .asst-panel {
        width: 100%;
        height: 100%;
        max-height: none;
        min-height: 0;
        border-radius: 0;
        border: 0;
        transform: none;
    }

    .asst-overlay.open .asst-panel {
        transform: none;
    }

    .asst-bubble { max-width: 100%; }

    .asst-top {
        flex-wrap: nowrap;
        padding: max(10px, var(--safe-top)) 12px 10px;
        flex-shrink: 0;
    }

    .asst-controls {
        width: auto;
        margin-left: auto;
        flex-shrink: 0;
    }

    .asst-log {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .asst-bottom {
        flex-shrink: 0;
        padding: 10px 12px max(10px, var(--safe-bottom));
    }

    .asst-composer-hint {
        display: none;
    }
}

@supports (padding: max(0px)) {
    @media (min-width: 601px) and (max-width: 900px) {
        .asst-overlay {
            padding-bottom: max(18px, var(--safe-bottom));
            padding-left: max(18px, var(--safe-left));
            padding-right: max(18px, var(--safe-right));
        }
    }
}

/* ─── Mobile (≤900px) — bas centre, style Android/iOS ─── */
@media (max-width: 900px) {
    /* Au-dessus de la barre d'onglets et de la barre de gestes : a 24 px du
       bas, un toast masquait les onglets (en paysage, Emploi et Focus). */
    .toast-container {
        bottom: calc(var(--bottom-tabs-space) + var(--safe-bottom));
        right: 50%;
        transform: translateX(50%);
        align-items: center;
        width: calc(100% - 32px);
        max-width: 420px;
    }

    .toast {
        width: 100%;
        max-width: 100%;
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }
}

.toast {
    background: var(--surface);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    min-width: 260px;
    max-width: 340px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: var(--shadow);
    animation: toast-in var(--dur-slow) var(--ease-out);
    font-size: 13px;
}

.toast.success {
    border-color: var(--green3);
}

.toast.error {
    border-color: var(--red);
}

.toast.info {
    /* INFO doit rester thème-dépendant (pas un bleu codé en dur) */
    border-color: var(--green3);
}

/* Pastille coloree autour de l'icone : signal visuel plus net que
   le svg seul, finition pro (pattern Linear/GitHub/Vercel). */
.toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.toast-icon svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.toast-msg {
    font-weight: 500;
    line-height: 1.4;
    color: var(--text);
    flex: 1;
    min-width: 0;
}

.toast.success .toast-icon {
    background: var(--green-dim);
    color: var(--green-text);
}

.toast.error .toast-icon {
    background: var(--red-dim);
    color: var(--red);
}

.toast.warning .toast-icon {
    background: var(--orange-dim);
    color: var(--orange);
}

.toast.warning {
    border-color: var(--orange);
}

.toast.info .toast-icon {
    background: var(--green-dim);
    color: var(--green2);
}

/* ─── Tips ─── */
.tip-card {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 12px;
}

/* Icone nue, couleur semantique : pas de carre teinte (DESIGN.md, Icones). */
.tip-icon {
    color: var(--green-text);
    margin-bottom: 10px;
    display: flex;
}

.tip-card:hover .tip-icon {
    background: var(--green-glow);
    transform: scale(1.06);
}

.tip-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--green-text);
    margin-bottom: 4px;
}

.tip-text {
    font-size: var(--text-sm);
    color: var(--muted);
    line-height: var(--leading-loose);
    max-width: 62ch;
}

/* ─── Empty state ─── */
.empty-state {
    text-align: center;
    padding: 24px 20px;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.empty-icon {
    margin-bottom: 12px;
    color: var(--muted2);
}

.empty-title {
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--muted);
}

.empty-sub {
    font-size: 12px;
    margin-top: 4px;
    max-width: 320px;
    line-height: 1.5;
}

/* (T34) CTA dans un empty state — bouton qui invite a agir au lieu d'un
   simple message passif. Aligne avec le pattern Exams._renderEmptyState. */
/* Meme mesure que le bouton du maintenant (dashboard.css) : marge interne
   et interlignage donnent la hauteur tactile, sans hauteur en dur. Un
   etat vide porte le seul bouton plein de sa page. */
/* .btn.empty-cta : specificite au-dessus de .btn (utilities.css, charge apres). */
.btn.empty-cta {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* ─── Tabs ─── */
.tabs {
    display: flex;
    gap: 4px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 4px;
    margin-bottom: 20px;
}

.tab {
    flex: 1;
    padding: 8px;
    border: 0;
    background: transparent;
    font-family: inherit;
    text-align: center;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12.5px;
    color: var(--muted);
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
    font-weight: var(--weight-emphasis);
}

.tab:hover {
    color: var(--text);
}

.tab:active {
    transform: scale(0.98);
}

.tab.active {
    background: var(--surface);
    color: var(--green-text);
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* ─── Thème bouton ─── */
.theme-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

.theme-btn:hover {
    background: var(--surface2);
    color: var(--text);
    border-color: var(--green3);
}

.theme-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--green-dim);
}

.theme-btn-icon {
    flex-shrink: 0;
    color: var(--green-text);
}

.theme-btn-label {
    flex: 1;
    text-align: left;
}

.theme-btn-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: var(--green-dim);
    color: var(--green-text);
}

/* ─── Settings — liste des cours ─── */
.settings-course-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--bg3);
    margin-bottom: 6px;
    transition: background var(--dur-base);
}

.settings-course-item:hover {
    background: var(--surface);
}

.sci-color {
    width: 4px;
    height: 36px;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}

.sci-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.sci-code {
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 11px;
    flex-shrink: 0;
}

.sci-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sci-meta {
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
}

.sci-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* ─── Color picker ─── */
.color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 6px;
}

.color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform var(--dur-fast), border-color var(--dur-fast);
    padding: 0;
    flex-shrink: 0;
}

.color-dot:hover {
    transform: scale(1.15);
}

.color-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.color-dot.active {
    border-color: var(--text);
    transform: scale(1.15);
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);
}

/* Coche dans la pastille selectionnee : signal sans ambiguite (en plus de
   l'anneau). Blanche + ombre legere pour rester lisible sur toutes les teintes. */
.color-dot-check {
    opacity: 0;
    transform: scale(0.4);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
    filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--black) 35%, transparent));
    pointer-events: none;
}

.color-dot.active .color-dot-check {
    opacity: 1;
    transform: scale(1);
}

/* ─── Apercu live du cours (formulaire ajout / edition) ─── */
.course-preview {
    margin-top: 12px;
}

.cpv-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--c) 14%, var(--surface));
    animation: cpvPop var(--dur-base) var(--ease-out);
}

@keyframes cpvPop {
    from { opacity: .4; transform: translateY(2px); }
    to { opacity: 1; transform: translateY(0); }
}

.cpv-code {
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: color-mix(in srgb, var(--c) 50%, var(--text));
    background: color-mix(in srgb, var(--c) 16%, transparent);
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.cpv-name {
    font-size: 13px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Responsive composants ─── */
@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .slot {
        padding: 10px 12px;
        gap: 10px;
    }

    .slot-time {
        min-width: 60px;
        font-size: 11px;
    }

    .slot-name {
        font-size: 12px;
    }

    .stat-card {
        padding: 14px 16px;
    }

    .stat-value {
        font-size: 22px;
    }

    .card-header {
        padding: 12px 16px;
    }

    .card-body {
        padding: 16px;
    }

    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .modal-header,
    .modal-body {
        padding: 16px;
    }

    .modal-footer {
        padding: 12px 16px;
        gap: 8px;
    }

    .modal-title {
        font-size: 15px;
    }

    .course-item {
        padding: 12px 14px;
        gap: 12px;
    }

    .ci-code {
        min-width: 70px;
        font-size: 10px;
        padding: 3px 8px;
    }

    .ci-name {
        font-size: 12.5px;
    }

    .toast {
        min-width: 0;
        max-width: calc(100vw - 24px);
        width: 100%;
    }

    .btn {
        min-height: 44px;
    }

    .nav-item {
        min-height: 44px;
    }

    .icon-btn {
        min-width: 44px;
        min-height: 44px;
    }
}

@media (max-width: 380px) {
    .stat-card {
        padding: 12px 14px;
    }

    .stat-value {
        font-size: 20px;
    }

    .stat-label {
        font-size: 11px;
    }

    .course-item {
        padding: 10px 12px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .ci-code {
        min-width: 0;
    }

    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .modal-header,
    .modal-body {
        padding: 14px;
    }
        padding: 12px 14px;
    }

    .modal-footer {
        padding: 10px 14px;
    }

    .modal-title {
        font-size: 14px;
    }

    .session-item {
        padding: 10px 12px;
    }

    .section-title {
        font-size: 14px;
    }

    .empty-state {
        padding: 24px 16px;
    }

    .empty-title {
        font-size: 14px;
    }
}

@media (max-width: 320px) {
    .card-header {
        padding: 10px 12px;
    }

    .card-body {
        padding: 12px;
    }

    .slot {
        padding: 8px 10px;
        gap: 8px;
    }

    .slot-time {
        min-width: 50px;
        font-size: 10px;
    }

    .modal-overlay {
        padding: 6px;
    }

    .modal {
        border-radius: var(--radius);
    }

    .modal-header,
    .modal-body {
        padding: 10px 12px;
    }

    .modal-footer {
        padding: 8px 12px;
    }

    .btn {
        padding: 6px 12px;
        font-size: 12px;
        min-height: 40px;
    }

    .toast {
        max-width: calc(100vw - 16px);
        padding: 10px 12px;
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   PLANNER (T35) — hero, groupes temporels, stats laterales, empty state
   - Hero reutilise .dash-hero-* (informatif ; CTA Planifier dans la topbar)
   - Groupes : Aujourd'hui (accent) / Cette semaine / Plus tard / Passees (toggle)
   - Stats : volume total + barres avec bucket couleur (low/mid/high)
   ═══════════════════════════════════════════════════════════════════ */

.planner-hero {
    margin-bottom: 22px;
}

.planner-hero .dash-hero-focal {
    margin-bottom: 0;
}

.planner-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ─── Groupes temporels ─── */
.planner-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.planner-group-header {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 4px 4px;
    border: 0;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: var(--color-text);
    transition: color var(--dur-fast) var(--ease-out);
}

.planner-group-header--static {
    cursor: default;
}

.planner-group-header--toggle {
    cursor: pointer;
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    margin: 0 -8px 4px;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.planner-group-header--toggle:hover {
    background: var(--color-surface-soft);
}

.planner-group-icon {
    display: grid;
    place-items: center;
    color: var(--color-muted);
    flex-shrink: 0;
    line-height: 0;
}

.planner-group--accent .planner-group-icon {
    color: var(--color-primary-text);
}

.planner-group-title {
    font-family: var(--font-display), sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text);
}

.planner-group--accent .planner-group-title {
    color: var(--color-primary-text);
}

.planner-group-count {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--color-muted);
    background: var(--color-surface-soft);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    min-width: 22px;
    text-align: center;
    border: 1px solid var(--border);
}

.planner-group--accent .planner-group-count {
    background: var(--color-primary-soft);
    color: var(--color-primary-text);
    border-color: color-mix(in srgb, var(--color-primary) 30%, var(--border));
}

.planner-group-chevron {
    margin-left: auto;
    color: var(--color-muted);
    transition: transform var(--dur-base) var(--ease-out);
    display: grid;
    place-items: center;
    line-height: 0;
}

.planner-group:not(.is-collapsed) .planner-group-chevron {
    transform: rotate(90deg);
}

.planner-group-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.planner-group.is-collapsed .planner-group-list {
    display: none;
}

/* ─── Session item — modifiers T35 ─── */
.session-item--past {
    color: var(--muted);
}

.session-item--past .session-name {
    color: var(--color-muted);
}

.session-when {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.session-type-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-muted);
}

.session-note {
    font-size: 11px;
    color: var(--color-muted);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1.3;
}

.session-note svg {
    flex-shrink: 0;
}

/* ─── Stats laterales ─── */
.planner-stats-summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.planner-stats-total {
    font-family: var(--font-display), sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: var(--tracking-tight);
    color: var(--color-primary-text);
    line-height: 1;
}

.planner-stats-label {
    font-size: 12px;
    color: var(--color-muted);
    font-weight: 500;
}

.planner-stats-empty {
    font-size: 12px;
    color: var(--color-muted);
    text-align: center;
    padding: 18px 8px;
    line-height: 1.5;
}

.planner-stat-row {
    margin-bottom: 12px;
}

.planner-stat-row:last-child {
    margin-bottom: 0;
}

.planner-stat-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    gap: 8px;
}

.planner-stat-label {
    font-size: 11.5px;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.planner-stat-value {
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.planner-stat-row[data-bucket="low"] .planner-stat-value {
    color: var(--color-warning);
}

.planner-stat-row[data-bucket="mid"] .planner-stat-value {
    color: var(--color-text);
}

.planner-stat-row[data-bucket="high"] .planner-stat-value {
    color: var(--color-primary-text);
}

.planner-stat-fill {
    background: var(--course-color, var(--color-primary));
}

.planner-stat-row[data-bucket="low"] .planner-stat-fill {
    opacity: 0.55;
}

.planner-stat-row[data-bucket="mid"] .planner-stat-fill {
    opacity: 0.85;
}

/* ─── Empty state ─── */
.planner-empty {
    text-align: center;
    padding: 44px 24px;
    background: var(--color-surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.planner-empty-icon {
    color: var(--muted);
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.planner-empty-title {
    font-family: var(--font-display), sans-serif;
    font-weight: 800;
    font-size: 17px;
    color: var(--color-text);
    margin-bottom: 6px;
}

.planner-empty-sub {
    font-size: 13px;
    color: var(--color-muted);
    line-height: 1.45;
}

/* ──────────────────────────────────────────────────────────────────────
   Notification toggles (Settings > Notifications)
   Style switch iOS/Telegram, monochrome avec accent --green pour ON.
   ────────────────────────────────────────────────────────────────────── */
.notif-toggles {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.notif-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 4px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background var(--dur-fast) var(--ease-out);
}

.notif-toggle:hover {
    background: var(--surface);
}

.notif-toggle input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.notif-toggle-track {
    flex-shrink: 0;
    width: 38px;
    height: 22px;
    border-radius: 11px;
    /* Eteinte, la piste doit se voir (3:1 des composants graphiques) :
       --border disparaissait sur fond clair. */
    background: var(--muted2);
    position: relative;
    transition: background var(--dur-base) var(--ease-out);
    cursor: pointer;
}

.notif-toggle-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--white);
    transition: transform var(--dur-base) var(--ease-out);
}

.notif-toggle input[type="checkbox"]:checked + .notif-toggle-track {
    background: var(--green);
}

.notif-toggle input[type="checkbox"]:checked + .notif-toggle-track::after {
    transform: translateX(16px);
}

.notif-toggle input[type="checkbox"]:focus-visible + .notif-toggle-track {
    box-shadow: 0 0 0 3px var(--green-dim);
}

.notif-toggle input[type="checkbox"]:disabled + .notif-toggle-track {
    opacity: 0.4;
    cursor: not-allowed;
}

.notif-toggle-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.notif-toggle-label strong {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
}

.notif-toggle-label small {
    font-size: 11.5px;
    color: var(--muted);
    line-height: 1.4;
}
/* ──────────────────────────────────────────────────────────────────────
   Phase 4 — Mon parcours (XP + niveau + badges)
   ────────────────────────────────────────────────────────────────────── */

.progress-level {
    margin-bottom: 18px;
}

.progress-level-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.progress-level-num {
    font-family: var(--font-display), sans-serif;
    font-weight: 800;
    font-size: 22px;
    letter-spacing: var(--tracking-tight);
    color: var(--text);
}

.progress-level-xp {
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--green-text);
}

.progress-level-bar {
    height: 8px;
    background: var(--border);
    border-radius: var(--radius-xs);
    overflow: hidden;
    margin-bottom: 6px;
}

.progress-level-fill {
    height: 100%;
    background: var(--green);
    border-radius: var(--radius-xs);
    transition: width var(--dur-screen) var(--ease-out);
}

.progress-level-hint {
    font-size: 11.5px;
    color: var(--muted);
}

.progress-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 18px 0 22px;
    padding: 14px 4px;
    background: var(--bg3, var(--surface));
    border-radius: var(--radius-sm);
}

.progress-stat {
    text-align: center;
    min-width: 0;
}

.progress-stat-n {
    font-family: var(--font-display), sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    line-height: 1.1;
}

.progress-stat-l {
    font-size: 10.5px;
    color: var(--muted);
    margin-top: 4px;
}

.progress-badges-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
}

.progress-badges-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

.progress-badges-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--green-text);
}

.progress-badges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
}

.badge-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: var(--surface);
    transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
    cursor: default;
}

.badge-card.earned {
    border-color: color-mix(in srgb, var(--green) 40%, var(--border));
    background: color-mix(in srgb, var(--green) 6%, var(--surface));
}

.badge-card.earned:hover {
    transform: translateY(-1px);
    border-color: var(--green);
}

.badge-card.locked {
    color: var(--muted2);
}

.badge-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
}

.badge-card.earned .badge-icon {
    background: var(--green-dim);
    border-color: color-mix(in srgb, var(--green) 30%, transparent);
    color: var(--green-text);
}

.badge-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.badge-title {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.badge-desc {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.3;
}

/* ──────────────────────────────────────────────────────────────────────
   Phase 5 — Classements (page Leaderboard)
   ────────────────────────────────────────────────────────────────────── */

.lb-page {
    max-width: 720px;
    margin: 0 auto;
    padding: 4px 0 28px;
}

.lb-prompt,
.leaderboard-prompt {
    max-width: 480px;
    margin: 48px auto;
    text-align: center;
    padding: 32px 24px;
    background: var(--surface);
    border-radius: var(--radius);
}

.leaderboard-prompt-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 18px;
    border-radius: var(--radius);
    background: var(--green-dim);
    color: var(--green-text);
    display: grid;
    place-items: center;
}

.leaderboard-prompt-title {
    font-family: var(--font-display), sans-serif;
    font-weight: 800;
    font-size: 20px;
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    margin: 0 0 10px;
}

.leaderboard-prompt-sub {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.55;
    margin: 0 0 22px;
}

.leaderboard-prompt-actions {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
}

.leaderboard-prompt-hint {
    font-size: 11.5px;
    color: var(--muted2);
    line-height: 1.5;
}

.lb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.lb-tabs {
    display: inline-flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px;
    gap: 2px;
}

.lb-tab {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-family: inherit;
    font-weight: 600;
    font-size: 12.5px;
    padding: 7px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.lb-tab:hover:not(.active) {
    color: var(--text);
}

.lb-tab.active {
    background: var(--green-dim);
    color: var(--green-text);
}

.lb-scope {
    display: inline-flex;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 3px;
}

.lb-scope-btn {
    background: transparent;
    border: 0;
    color: var(--muted);
    font-family: inherit;
    font-weight: 600;
    font-size: 12px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.lb-scope-btn:hover:not(.active) {
    color: var(--text);
}

.lb-scope-btn.active {
    background: var(--text);
    color: var(--surface);
}

.lb-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.lb-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    padding: 7px 12px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.lb-chip:hover:not(.active) {
    color: var(--text);
    border-color: var(--green3, var(--green));
}

.lb-chip.active {
    background: var(--green);
    color: var(--on-primary);
    border-color: var(--green);
}

.lb-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.lb-loading {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    padding: 40px 0;
}

.lb-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted);
}

.lb-empty-title {
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    font-size: 15px;
}

.lb-empty-sub {
    font-size: 13px;
    color: var(--muted);
}

.lb-row {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--surface);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease-out);
}

.lb-row-top1 {
    background: color-mix(in srgb, var(--medal-gold) 9%, var(--surface));
}

.lb-row-top2 {
    background: color-mix(in srgb, var(--medal-silver) 9%, var(--surface));
}

.lb-row-top3 {
    background: color-mix(in srgb, var(--medal-bronze) 9%, var(--surface));
}

.lb-row-self {
    border-color: var(--green);
    background: color-mix(in srgb, var(--green) 7%, var(--surface));
}

.lb-rank {
    font-family: var(--font-display), sans-serif;
    font-weight: 800;
    font-size: 18px;
    text-align: center;
    color: var(--muted);
    min-width: 36px;
}

.lb-row-top1 .lb-rank { color: var(--medal-gold); }
.lb-row-top2 .lb-rank { color: var(--medal-silver); }
.lb-row-top3 .lb-rank { color: var(--medal-bronze); }
.lb-row-self .lb-rank { color: var(--green); }

.lb-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.lb-self-tag {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    background: var(--green);
    color: var(--on-primary);
    flex-shrink: 0;
}

.lb-score {
    font-family: var(--font-display), sans-serif;
    font-weight: 800;
    font-size: 16px;
    color: var(--text);
    white-space: nowrap;
}

.lb-unit {
    font-size: 11px;
    font-weight: 500;
    color: var(--muted);
    margin-left: 3px;
}

.lb-footer {
    text-align: center;
    padding-top: 8px;
}

/* ============================================================
   A PROPOS  (page-about)  -- DESIGN.md, lot 3 : page editoriale, pas une
   landing. Trois largeurs, trois placements :
     - etroit  (< 720)   : une colonne, titres tenus sur une ligne par une
                           taille en vw, CTA cote a cote, fondateur en ligne ;
     - moyen   (720-1099): une colonne plus large, moments sur deux colonnes ;
     - large   (>= 1100) : deux colonnes 1,45fr / 1fr, le propos a gauche,
                           le contact a droite et collant. Aucun element en
                           double : une seule marque (topbar), un seul lien
                           par reseau, un seul CTA d'entree.
   ============================================================ */
.about-wrap {
    max-width: 1080px;
    margin: 0 auto;
    padding: 4px 0 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
}
.about-main {
    min-width: 0;
    display: grid;
    gap: 40px;
}
.about-side {
    min-width: 0;
    display: grid;
    gap: 16px;
    align-content: start;
}

/* --- Libelle de section --- */
.about-label {
    font-size: var(--text-xs);
    font-weight: var(--weight-emphasis);
    color: var(--muted);
    margin: 0 0 6px;
}

/* --- Hero : dans l'espace, pas dans une carte --- */
.about-hero {
    padding: 8px 0 0;
}
/* Titre et sous-titre tiennent chacun sur UNE ligne des 320px : taille en
   vw bornee, pas de retour force. Verifie a 320, 360, 390, 768, 1280. */
.about-hero-title {
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-display);
    font-size: clamp(24px, 7vw, 38px);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    margin: 0;
    white-space: nowrap;
}
.about-hero-sub {
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-heading);
    font-size: clamp(15px, 4.5vw, 22px);
    line-height: var(--leading-tight);
    color: var(--green-text);
    margin: 6px 0 0;
    white-space: nowrap;
}
.about-hero-lead {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--muted);
    margin: 16px 0 0;
    max-width: 52ch;
}
.about-hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 22px;
    max-width: 420px;
}
.about-hero-actions .btn {
    justify-content: center;
    min-height: 44px;
}
.about-cta-ic {
    display: inline-flex;
    width: 16px;
    height: 16px;
}
.about-cta-ic .upte-icon {
    width: 16px;
    height: 16px;
}

/* --- Moments : une liste, un premier item en avant --- */
.about-section-head {
    margin-bottom: 4px;
}
.about-h2 {
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-display);
    font-size: clamp(17px, 4.9vw, 21px);
    line-height: var(--leading-tight);
    color: var(--text);
    margin: 0;
    white-space: nowrap;
}
.about-items {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: 32px;
}
.about-item {
    padding: 16px 0 18px;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 6px;
}
.about-item--lead {
    border-top: 0;
    padding-top: 10px;
    padding-bottom: 22px;
}
.about-item--lead .about-item-title {
    font-size: var(--text-lg);
}
.about-item--lead .about-item-text {
    font-size: var(--text-base);
}
.about-item-title {
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-heading);
    font-size: var(--text-md);
    color: var(--text);
    margin: 0;
}
.about-item-text {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--muted);
    margin: 0;
    max-width: 58ch;
}

/* --- Pense pour ici --- */
.about-origin .about-h2 {
    white-space: normal;
}
.about-p {
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--muted);
    margin: 10px 0 0;
    max-width: 58ch;
}

/* --- Fondateur --- */
.about-founder {
    padding: 18px 18px 16px;
}
.about-founder-head {
    display: flex;
    align-items: center;
    gap: 14px;
}
.about-photo-wrap {
    position: relative;
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--surface2);
}
.about-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
    display: block;
}
.about-photo-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-display);
    font-size: 22px;
    color: var(--muted);
}
.about-founder-id {
    min-width: 0;
}
.about-founder-id .about-label {
    margin-bottom: 2px;
}
.about-name {
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-display);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
    color: var(--text);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.about-role {
    font-size: var(--text-sm);
    color: var(--muted);
    margin: 3px 0 0;
}
.about-bio {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--muted);
    margin: 14px 0 12px;
}

/* --- Lignes de lien (mail, reseaux) : icone + nom + detail, 44px --- */
.about-links {
    display: grid;
    margin-top: 10px;
}
.about-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 52px;
    padding: 8px 4px;
    border-top: 1px solid var(--border);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.about-links .about-link:first-child {
    border-top: 0;
}
.about-link--mail {
    border-top: 1px solid var(--border);
    padding-top: 12px;
}
.about-link:hover {
    background: var(--surface2);
}
.about-link:active {
    background: var(--bg3);
}
.about-link-ic {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--green-text);
}
.about-link-ic .upte-icon {
    width: 22px;
    height: 22px;
}
.about-link-body {
    display: grid;
    min-width: 0;
}
.about-link-name {
    font-weight: var(--weight-emphasis);
    font-size: var(--text-sm);
    color: var(--text);
}
.about-link-sub {
    font-size: var(--text-xs);
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Reseaux --- */
.about-connect {
    padding: 18px 18px 8px;
}

/* --- Pied --- */
.about-foot {
    font-size: var(--text-xs);
    color: var(--muted2);
    margin: 4px 4px 0;
}

/* --- Moyen : plus de place, les moments se rangent sur deux colonnes --- */
@media (min-width: 720px) {
    .about-wrap {
        padding-top: 12px;
    }
    .about-hero-actions {
        display: flex;
    }
    .about-hero-actions .btn {
        flex: 0 0 auto;
        padding-left: 18px;
        padding-right: 18px;
    }
    .about-items {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }
    .about-item--lead {
        grid-column: 1 / -1;
    }
    .about-founder {
        padding: 22px 22px 18px;
    }
    .about-connect {
        padding: 22px 22px 10px;
    }
    .about-photo-wrap {
        width: 132px;
        height: 132px;
    }
}

/* --- Large : deux colonnes, contact collant a droite --- */
@media (min-width: 1100px) {
    .about-wrap {
        grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr);
        column-gap: 56px;
        align-items: start;
    }
    .about-side {
        position: sticky;
        top: 16px;
    }
    .about-hero {
        padding-top: 18px;
    }
    /* Colonne droite plus etroite : la photo redescend pour laisser le
       nom tenir sur sa ligne. */
    .about-photo-wrap {
        width: 96px;
        height: 96px;
    }
}

/* ============================================================
   PIED VERSION VIVANTE (sidebar)
   ============================================================ */
.sidebar-version {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.sidebar-version .sv-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted2);
    flex-shrink: 0;
    transition: background var(--dur-base) var(--ease-out);
}
.sidebar-version .sv-status {
    font-size: 10px;
    color: var(--muted2);
    transition: color var(--dur-base) var(--ease-out);
}
.sidebar-version--ok .sv-dot,
.sidebar-version--update .sv-dot {
    background: var(--green3);
}
.sidebar-version--ok .sv-status {
    color: var(--green3);
}
.sidebar-version--update .sv-status {
    color: var(--green3);
    font-weight: 600;
}
.sidebar-version--update .sv-dot {
    animation: svVersionPulse 1.8s ease-out infinite;
}
@keyframes svVersionPulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 50%, transparent); }
    70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); }
}

/* ============================================================
   EMPLOI DU TEMPS — ligne "maintenant" + conflit d'horaire
   ============================================================ */
.wg-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid var(--red);
    z-index: calc(var(--z-base) + 6);
    pointer-events: none;
}
.wg-now-dot {
    position: absolute;
    left: -3px;
    top: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
}
.wg-event--conflict {
    box-shadow: inset 0 0 0 1.5px var(--red);
    background: color-mix(in srgb, var(--red) 10%, var(--surface));
}
/* En bas a droite : en haut, la pastille couvrait la fin du code de l'UE
   dans les colonnes partagees (« INF142! »). */
.wg-ev-conflict {
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--red);
    color: var(--on-primary);
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    z-index: calc(var(--z-base) + 2);
}

/* ─── Selecteur de police (Reglages > Confort de lecture) ─── */
.font-seg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.font-seg-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg3);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.font-seg-btn:hover {
    border-color: var(--green3);
}

.font-seg-btn:active {
    transform: scale(0.98);
}

.font-seg-btn.active {
    border-color: var(--green);
    background: var(--green-dim);
}

.font-seg-name {
    font-family: var(--font-display), sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--text);
}

.font-seg-btn.active .font-seg-name {
    color: var(--green-text);
}

.font-seg-sample {
    font-size: 13.5px;
    color: var(--muted);
    line-height: 1.3;
}

@media (max-width: 560px) {
    .font-seg {
        grid-template-columns: 1fr;
    }

    .font-seg-btn {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }
}

/* Signalement d'une reponse d'Apte (exigence Play : le contenu genere
   par l'IA est signalable au meme titre que celui des utilisateurs). */
.asst-report-btn {
  display: block;
  margin-top: 8px;
  background: none;
  border: none;
  padding: 2px 0;
  font-size: var(--text-xs);
  color: var(--muted2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.asst-report-btn:hover {
  color: var(--red);
}

/* ─── AuthGate : la porte de connexion, sur <body> ───
   Elle n'est ancree dans aucun panneau : une feuille ancree dans .asst-panel
   n'etait visible que depuis le chat d'Apte, alors que la moitie des
   culs-de-sac sont ailleurs (appel Kossivi, Classement, salons, partage), et
   elle heritait de la mise en page de son hote (overflow, transform, hauteur
   de viewport virtuel). Ici : position fixed, aucune dependance.
   bande modale (+30) : au-dessus de tout ce qui peut l'ouvrir (tiroir Apte,
   appel Kossivi, modale, confirmation, portail Picker), sous les toasts.
   Echelle des couches : variables.css (--z-*). */
.auth-gate {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modale) + 30);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.auth-gate[hidden] {
  display: none;
}

.auth-gate__scrim {
  position: absolute;
  inset: 0;
  background: var(--overlay-scrim);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}

.auth-gate.is-open .auth-gate__scrim {
  opacity: 1;
}

/* La feuille TRAVERSE une distance (elle monte du bas) : --dur-screen par
   doctrine du mouvement (DESIGN.md). */
.auth-gate__sheet {
  position: relative;
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) calc(var(--space-5) + var(--safe-bottom));
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow);
  transform: translateY(100%);
  transition: transform var(--dur-screen) var(--ease-out);
}

.auth-gate.is-open .auth-gate__sheet {
  transform: translateY(0);
}

/* Ecran large : la feuille se pose au centre plutot que collee au bas, ou
   elle serait une bande perdue en pied d'un tres grand ecran. */
@media (min-width: 901px) {
  .auth-gate {
    align-items: center;
  }

  .auth-gate__sheet {
    border-bottom: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding-bottom: var(--space-5);
    transform: translateY(var(--space-4));
    opacity: 0;
    transition: transform var(--dur-base) var(--ease-out),
      opacity var(--dur-base) var(--ease-out);
  }

  .auth-gate.is-open .auth-gate__sheet {
    transform: translateY(0);
    opacity: 1;
  }
}

.auth-gate__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.auth-gate__close:hover {
  color: var(--text);
}

.auth-gate__title {
  margin: 0;
  padding-right: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
  color: var(--text);
}

.auth-gate__text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--muted);
  /* Mesure de lecture (DESIGN.md, Ecriture). */
  max-width: 60ch;
}

.auth-gate__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-min);
  margin-top: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg2);
  color: var(--text);
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-emphasis);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}

.auth-gate__google:hover {
  border-color: var(--green3);
}

.auth-gate__google:disabled {
  opacity: 0.6;
  cursor: default;
}

.auth-gate__alt {
  border: 0;
  background: transparent;
  color: var(--muted2);
  font-size: var(--text-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.auth-gate__alt:hover {
  color: var(--text);
}

/* ─── Etats invite : une explication ET une action ───
   Ces surfaces portaient un message seul ("Connecte-toi pour voir ton
   parcours"), donc un cul-de-sac. Le bouton ouvre AuthGate, qui ramene ici
   apres connexion. Classes plutot que styles inline : elles etaient ecrites
   en style= dans app.js, hors de portee de l'audit CSS. */
.guest-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0;
}

.guest-row__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--tap-min);
    height: var(--tap-min);
    border-radius: var(--radius);
    background: var(--surface2);
    border: 1px dashed var(--border);
    color: var(--muted2);
}

.guest-row__body {
    flex: 1;
    min-width: 0;
}

.guest-row__title {
    margin-bottom: var(--space-1);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: var(--weight-heading);
    color: var(--text);
}

.guest-row__text {
    font-size: var(--text-xs);
    color: var(--muted);
}

.guest-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) 0;
    text-align: center;
}

.guest-empty__text {
    margin: 0;
    max-width: 44ch;
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--muted);
}

/* Badge Mode local d'un invite : il OUVRE la porte de connexion. Un badge
   cliquable doit se voir comme tel, sinon personne ne le clique. */
.asst-mode-badge--action {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── Bouton "Appeler Kossivi" du tiroir d'Apte ───
   Ces regles etaient dans kossivi-call.css, une feuille de FONCTIONNALITE
   chargee a la demande, alors que le bouton vit dans la coquille et devient
   visible des qu'Assistant._syncVoiceDrawerUi() le devoile. Les deux chemins
   sont asynchrones et independants : sur reseau lent le bouton sortait sans
   aucun style (gris systeme, Arial, coins carres) pendant plusieurs secondes.
   Mesure sur upte.app a 400 kbit/s : 5,3 s. Un bouton de la coquille prend ses
   regles dans la coquille. */
.asst-kossivi-cta[hidden] { display: none; }

.asst-kossivi-cta {
    /* 10px et 20px ne sont sur aucun pas de l'echelle (--space-3 = 12,
       --space-5 = 24) : on garde les valeurs d'origine au pixel pres, un
       deplacement de regles ne doit rien changer au rendu. A tokeniser lors
       du lot espacement, avec la validation visuelle qui va avec. */
    padding: 10px 0 2px;
}

.asst-kossivi-call-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: 13px 20px;
    border-radius: var(--radius);
    background: var(--green);
    color: var(--on-primary);
    font-weight: var(--weight-emphasis);
    font-size: var(--text-base);
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.asst-kossivi-call-btn:active {
    opacity: .82;
    transform: scale(.97);
}

/* ─── Kossivi pas encore ouvert : etiquette sur les boutons d'appel ───
   L'attribut est pose sur <html> par kossivi-dispo.js, d'apres la sonde du
   courtier. Un attribut de racine plutot qu'un marquage bouton par bouton :
   ceux du viewer et des notes sont rendus a la demande, ils rateraient un
   passage fait une seule fois au demarrage.
   Les boutons restent VISIBLES et cliquables : le clic explique, il n'echoue
   pas. Regles dans components.css et non kossivi-call.css, qui n'est chargee
   qu'a l'ouverture d'un appel, c'est-a-dire jamais dans ce cas. */
html[data-kossivi="bientot"] .asst-kossivi-call-btn::after,
html[data-kossivi="bientot"] .viewer-kossivi-btn::after,
html[data-kossivi="bientot"] .notes-kossivi-btn::after {
    content: "Bientôt";
    margin-left: var(--space-2);
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--green-dim);
    color: var(--green-text);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--weight-emphasis);
    line-height: var(--leading-loose);
    letter-spacing: var(--tracking-caps);
    white-space: nowrap;
}

/* Le bouton plein du tiroir porte deja le vert : son etiquette se detache en
   creux plutot qu'en couleur, sinon elle disparait dans le fond. */
html[data-kossivi="bientot"] .asst-kossivi-call-btn {
    background: var(--surface2);
    color: var(--text);
}

html[data-kossivi="bientot"] .asst-kossivi-call-btn::after {
    background: var(--green-dim);
    color: var(--green-text);
}

/* ─── Acceptation des conditions (exigence Play) ───
   Ecran bloquant, donc sobre et court : trois regles, deux liens, un
   bouton. Une sortie existe toujours (se deconnecter), sinon un compte
   qui refuse se retrouverait prisonnier de l'application. */
.terms-gate {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modale) + 50);
  background: var(--overlay-scrim-solid);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  padding-top: calc(20px + var(--safe-top));
  padding-bottom: calc(20px + var(--safe-bottom));
  overflow-y: auto;
}

.terms-gate__card {
  width: 100%;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.terms-gate__title {
  font-family: var(--font-display), sans-serif;
  font-size: var(--text-lg);
  color: var(--text);
  margin-bottom: 10px;
}

.terms-gate__text {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-loose);
  margin-bottom: 12px;
}

.terms-gate__list {
  margin: 0 0 14px 18px;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: var(--leading-loose);
}

.terms-gate__links {
  display: flex;
  gap: 16px;
  margin-bottom: 18px;
  font-size: var(--text-xs);
}

.terms-gate__links a {
  color: var(--green-text);
}

.terms-gate__btn {
  width: 100%;
  min-height: var(--tap-min);
  padding: 14px 18px;
  background: var(--green3);
  border: 1.5px solid var(--green3);
  border-radius: var(--radius);
  color: var(--on-primary);
  font-family: var(--font-display), sans-serif;
  font-weight: var(--weight-emphasis);
  font-size: var(--text-sm);
  cursor: pointer;
}

.terms-gate__btn:disabled {
  opacity: .55;
  cursor: progress;
}

.terms-gate__quit {
  width: 100%;
  margin-top: 10px;
  background: none;
  border: none;
  padding: 8px;
  font-size: var(--text-xs);
  color: var(--muted2);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Ecran tactile : cibles a 44 px (--tap-min) ───
   Uniquement au doigt : a la souris, rien ne change. */
@media (pointer: coarse) {
    .tab,
    .theme-btn,
    .leaderboard-prompt-actions .btn,
    .confirm-actions .btn,
    .asst-status-pill,
    .asst-report-btn,
    .asst-input,
    /* Tablette au doigt (768, 1024) : la taille venait de la largeur, pas
       du pointeur ; btn-sm restait a 26-35 px, icones a 32 px. */
    .btn,
    .dash-next-item,
    .planner-group-header--toggle {
        min-height: var(--tap-min);
    }

    .icon-btn,
    .modal-close {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
    }

    /* Boutons icone du panneau Apte : carre plein de --tap-min. */
    .asst-close,
    .asst-toolbar-btn,
    .asst-composer-btn {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
    }
}

/* ═══ Composants partages : charges au demarrage ═══
   Ces blocs vivaient dans la feuille d'une page paresseuse (rooms.css,
   learning.css) alors qu'ils s'affichent depuis n'importe quelle page :
   la feuille de signalement s'ouvre depuis Apte, le contenu riche sert a
   Kossivi et au lecteur. Ouverts hors de leur page, ils arrivaient sans
   style. Un composant partage vit ici, jamais dans la feuille d'une page. */

/* ═══ Couche commune (couche.js) ═══
   La seule couche de superposition : voile, pile, forme, zones sures,
   clavier et animation de toute fenetre ouverte par-dessus une page. Au
   telephone (moins de 720 px) une feuille qui monte du bas ; a partir de la
   tablette une modale centree, ou un popover pres de son ancre. Une seule
   animation : --couche-depart et --couche-duree changent avec la forme
   (feuille : distance parcourue, --dur-screen ; modale et popover : sur
   place, --dur-base). */
html.couche-ouverte,
html.couche-ouverte body {
    overflow: hidden;
}

.couche {
    position: fixed;
    inset: 0;
    /* La pile, pas le composant, decide de la hauteur : chaque fenetre se
       pose au-dessus de celle qui l'a ouverte. */
    z-index: calc(var(--z-modale) + 10 + var(--couche-rang, 0) * 2);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--safe-top) var(--safe-right) 0 var(--safe-left);
    --couche-duree: var(--dur-screen);
    --couche-depart: translateY(100%);
    --couche-opacite: 1;
}

.couche__fond {
    position: absolute;
    inset: 0;
    background: var(--overlay-scrim);
    animation: couche-fondu var(--couche-duree) var(--ease-out) both;
}

.couche__panneau {
    position: relative;
    width: 100%;
    max-height: calc(100% - var(--space-6) - var(--couche-clavier, 0px));
    margin-bottom: var(--couche-clavier, 0px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: var(--shadow);
    padding: 0 var(--space-5) var(--space-5);
    /* Zone de la barre de gestes en bordure, pas en marge interne : une
       marge interne defile avec le contenu, et le bas d'une longue feuille
       passait sous la barre. La bordure, elle, reste hors du defilement. */
    border-bottom: var(--safe-bottom) solid var(--surface);
    animation: couche-entree var(--couche-duree) var(--ease-out) both;
}

.couche__panneau:focus {
    outline: none;
}

/* Poignee : 24 px de haut pour le doigt, un trait de 4 px pour l'oeil. */
.couche__poignee {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--space-5);
    margin: 0 calc(var(--space-5) * -1) var(--space-1);
    touch-action: none;
    cursor: grab;
}

.couche__poignee::before {
    content: "";
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--muted2);
}

.couche__panneau--glisse {
    animation: none;
}

.couche--sortie {
    pointer-events: none;
}

.couche--sortie .couche__panneau {
    animation: couche-sortie var(--couche-duree) var(--ease-out) both;
}

.couche--sortie .couche__fond {
    animation: couche-fondu-sortie var(--couche-duree) var(--ease-out) both;
}

@keyframes couche-entree {
    from { transform: var(--couche-depart); opacity: var(--couche-opacite); }
}

@keyframes couche-sortie {
    to { transform: var(--couche-depart); opacity: var(--couche-opacite); }
}

@keyframes couche-fondu {
    from { opacity: 0; }
}

@keyframes couche-fondu-sortie {
    to { opacity: 0; }
}

@media (min-width: 720px) {
    .couche--fenetre {
        align-items: center;
        padding: max(var(--space-6), var(--safe-top)) var(--space-5) max(var(--space-6), var(--safe-bottom));
        --couche-duree: var(--dur-base);
        --couche-depart: scale(0.96);
        --couche-opacite: 0;
    }

    .couche--fenetre .couche__panneau {
        width: min(440px, 100%);
        max-height: 100%;
        border-radius: var(--radius-lg);
        border-bottom-width: 0;
        padding: var(--space-5);
    }

    .couche--fenetre .couche__poignee {
        display: none;
    }

    /* Fenetre de travail (creation de cartes) : plus large qu'un choix. */
    .couche--fenetre .couche__panneau--large {
        width: min(640px, 100%);
    }
}

/* Modale de l'app (UI.openModal) : le .modal garde son en-tete, son corps
   et son pied ; son conteneur, sa poignee et son animation sont ceux de la
   couche. */
.couche__panneau--modale {
    padding: 0;
}

.couche__panneau--modale > .couche__poignee {
    margin: 0 0 calc(var(--space-2) * -1);
}

.couche__panneau--modale > .modal {
    max-width: none;
    max-height: none;
    overflow: visible;
    background: none;
    box-shadow: none;
    border-radius: 0;
    transform: none;
    transition: none;
}

.couche__panneau--modale > .modal::before {
    display: none;
}

@media (min-width: 720px) {
    .couche--fenetre .couche__panneau--modale {
        width: min(500px, 100%);
        padding: 0;
    }

    .couche--fenetre .couche__panneau--modale[data-modal="addCourse"],
    .couche--fenetre .couche__panneau--modale[data-modal="editCourse"] {
        width: min(540px, 100%);
    }

    .couche--fenetre .couche__panneau--modale[data-modal="examForm"] {
        width: min(560px, 100%);
    }
}

/* Popover : pas de voile visible, le fond attrape seulement le toucher
   exterieur qui le referme. */
.couche--popover {
    display: block;
    padding: 0;
    --couche-duree: var(--dur-base);
    --couche-depart: translateY(-4px);
    --couche-opacite: 0;
}

.couche--popover .couche__fond {
    background: transparent;
}

.couche--popover .couche__panneau {
    position: fixed;
    left: var(--couche-x, 0);
    top: var(--couche-y, 0);
    width: max-content;
    min-width: 220px;
    max-width: min(360px, calc(100vw - var(--space-4)));
    max-height: calc(100vh - var(--couche-y, 0px) - var(--space-2));
    border-radius: var(--radius);
    border-bottom-width: 0;
    padding: var(--space-2);
}

/* Centre de notifications (main.js) : l'en-tete du panneau colle en haut,
   la liste defile dans la fenetre. Apres les regles du popover, qu'il
   precise. */
.couche__panneau--notifs {
    padding: 0;
}

.couche--popover .couche__panneau--notifs {
    width: min(340px, calc(100vw - var(--space-4)));
    max-width: none;
    padding: 0;
}

@media (prefers-reduced-motion: reduce) {
    .couche__fond,
    .couche__panneau {
        animation: none !important;
    }
}

html.low-bandwidth .couche__fond,
html.low-bandwidth .couche__panneau {
    animation: none !important;
}

/* Feuille de signalement (room-moderation.js : salons et Apte). Son
   conteneur est la couche commune ; il reste le contenu. */
.mod-sheet__title {
    font-family: var(--font-display), sans-serif;
    font-weight: var(--weight-emphasis);
    font-size: var(--text-md);
    color: var(--text);
    margin: 0 0 var(--space-1);
}

.mod-sheet__hint {
    font-size: var(--text-xs);
    color: var(--muted);
    margin: 0 0 var(--space-4);
}

.mod-sheet__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.mod-sheet__item {
    width: 100%;
    text-align: left;
    padding: var(--space-3) var(--space-4);
    min-height: var(--tap-min);
    background: var(--bg2);
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out);
}

.mod-sheet__item:hover,
.mod-sheet__item:focus-visible {
    background: var(--surface2);
}

.mod-sheet__cancel {
    width: 100%;
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    min-height: var(--tap-min);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-size: var(--text-sm);
    cursor: pointer;
}

/* ═══ Contenu riche (cartes, apercu, lecteur) ═══ */
.rich {
    word-break: break-word;
}

.rich--plain {
    white-space: pre-wrap;
}

.rich p { margin: 0 0 .6em; }
.rich p:last-child { margin-bottom: 0; }
.rich ul, .rich ol { margin: .4em 0; padding-left: 1.4em; text-align: left; }
.rich li { margin: .2em 0; }
.rich h1, .rich h2, .rich h3 { font-family: var(--font-display), sans-serif; margin: .3em 0 .4em; line-height: 1.2; }
.rich a { color: var(--green); }
.rich img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: .3em 0; }

.rich blockquote {
    margin: .5em 0;
    padding: .4em 12px;
    border-radius: var(--radius-sm);
    background: var(--surface2);
    color: var(--muted);
    font-style: italic;
    text-align: left;
}

.rich code {
    font-family: "JetBrains Mono", ui-monospace, "Courier New", monospace;
    font-size: .9em;
    background: var(--bg3);
    padding: .1em .35em;
    border-radius: var(--radius-xs);
}

.rich pre {
    text-align: left;
    background: var(--bg3);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    overflow-x: auto;
    margin: .5em 0;
    font-size: 13px;
}

.rich pre code {
    background: none;
    padding: 0;
}

.rich table {
    border-collapse: collapse;
    margin: .5em auto;
    font-size: .92em;
}

.rich th, .rich td {
    border: 1px solid var(--border);
    padding: 5px 10px;
}

.rich .katex { font-size: 1.05em; }
.rich .katex-display { margin: .5em 0; overflow-x: auto; overflow-y: hidden; }