/* ==========================================================================
   Bobou — modules : Pages, Tableaux, Discussion, et ce qui les relie
   (mentions, « mentionné dans », fichiers joints, recherche Ctrl + K, aperçus)
   ========================================================================== */

/* ---------- Onglets : six, qui tiennent sur la barre ---------- */
.tab[hidden] { display: none; }
.tab.has-dot::after {
  content: ""; position: absolute; top: .5em; right: .7em; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent-bg); box-shadow: 0 0 0 2px var(--bg);
}
@media (max-width: 1240px) { .tab { padding: .55em 1em; } .tab.has-dot::after { top: .4em; right: .3em; } }
@media (max-width: 1020px) {
  .tabs { position: relative; left: auto; transform: none; min-width: 0; overflow-x: auto; scrollbar-width: none; flex: 0 1 auto; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: .5em .85em; font-size: .9rem; white-space: nowrap; }
}

/* ---------- Icône du rôle devant le nom d'un membre (O.iconeRole) ---------- */
.role-ic { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; margin-right: .3em; vertical-align: -.14em; color: var(--muted); }
.role-ic .i { width: 100%; height: 100%; stroke-width: 1.7; }
.role-ic.role-crown { color: #e0b341; }
.card .role-ic.role-crown, .panneau .role-ic.role-crown { color: #a87a12; }

/* ---------- Mentions « @ » ---------- */
.ref {
  display: inline-flex; align-items: baseline; gap: .32em; max-width: 100%; padding: 0 .38em; border-radius: 6px;
  background: color-mix(in srgb, var(--ink) 9%, transparent); color: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: baseline;
  transition: background-color .15s ease;
}
.ref::before {
  content: ""; flex: none; width: .56em; height: .56em; border: 1.6px solid currentColor; border-radius: 2px; opacity: .7;
  transform: translateY(-.04em);
}
.ref[data-kind="task"]::before { border-radius: 50%; }
.ref[data-kind="board"]::before { border-radius: 2px; background: currentColor; opacity: .45; }
.ref[data-etat="done"] { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.ref[data-etat="done"]::before { background: currentColor; }
.ref[data-etat="doing"]::before { border-color: var(--doing); background: linear-gradient(90deg, var(--doing) 50%, transparent 50%); opacity: 1; }
.ref:hover { background: color-mix(in srgb, var(--ink) 16%, transparent); }
.ref.is-gone { color: var(--muted); text-decoration: line-through; }
.card .ref { background: color-mix(in srgb, var(--paper-ink) 10%, transparent); }

/* ---------- Mentionné dans / sous-pages ---------- */
.backlinks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); }
.backlinks + .backlinks { margin-top: 12px; padding-top: 0; border-top: 0; }
.bl-titre { flex-basis: 100%; margin: 0 0 4px; font-size: .78rem; color: var(--muted); }
.bl {
  display: inline-flex; align-items: center; gap: .45em; max-width: 100%; padding: .32em .7em; border: 1.5px solid var(--rule); border-radius: 8px;
  background: none; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: border-color .15s ease;
}
.bl span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl .i { width: 14px; height: 14px; color: var(--muted); }
.bl:hover { border-color: var(--ink); }

/* ---------- Fichiers joints ---------- */
.fichiers { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fi { display: inline-flex; align-items: center; border: 1.5px solid var(--rule); border-radius: 9px; transition: border-color .15s ease; }
.fi:hover { border-color: var(--ink); }
.fi-main {
  display: inline-flex; align-items: center; gap: .5em; max-width: 280px; padding: .38em .4em .38em .7em; border: 0;
  background: none; color: var(--ink); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
}
.fi-main .i { width: 15px; height: 15px; flex: none; }
.fi-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-main small { font-weight: 400; color: var(--muted); white-space: nowrap; }
.fi .ibtn { width: 28px; height: 28px; margin-right: 2px; color: var(--muted); }
.fi .ibtn .i { width: 14px; height: 14px; }
.fi-add {
  display: inline-flex; align-items: center; gap: .45em; padding: .38em .7em; border: 1.5px dashed var(--rule); border-radius: 9px;
  background: none; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.fi-add .i { width: 14px; height: 14px; }
.fi-add:hover { color: var(--ink); border-color: var(--ink); }
.panel-fichiers { margin: -6px 0 22px; }
.panel-fichiers.is-vide .fi-add { border-color: transparent; padding-left: 0; }
.pg-fichiers { margin: 0 0 22px; }
.pg-fichiers.is-vide .fi-add { border-color: transparent; padding-left: 0; opacity: .8; }
.pg-fichiers:empty, .panel-fichiers:empty { display: none; }

/* ---------- Grades (grades.js) ---------- */
/* Un membre : ses notes par matière */
.gr-mats { display: grid; gap: 30px; max-width: 760px; margin-top: 28px; }
.gr-titre { justify-content: space-between; }
.gr-titre > span { display: inline-flex; align-items: center; gap: .5em; }
.gr-titre > b { font-size: 1.15rem; letter-spacing: 0; }
.gr-ligne {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline; gap: 16px; width: 100%;
  padding: 11px 2px; border: 0; border-bottom: 1px solid var(--rule); background: none; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease;
}
.gr-ligne:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.gr-quoi { display: grid; gap: 2px; min-width: 0; }
.gr-nom { font-weight: 600; }
.gr-retour { color: var(--muted); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gr-date { color: var(--muted); font-weight: 600; white-space: nowrap; }
.gr-note { font-family: var(--f-display); font-stretch: 72%; font-size: 1.35rem; line-height: 1; white-space: nowrap; }
.gr-note small { font-family: var(--f-text); font-stretch: normal; font-size: .82rem; color: var(--muted); }
/* Un admin : le carnet de la classe */
.gr-filtres { margin: 22px 0 14px; }
.gr-table-box { overflow-x: auto; }
.gr-table { border-collapse: collapse; min-width: 100%; font-variant-numeric: tabular-nums; }
.gr-table th, .gr-table td { padding: 9px 12px; border-bottom: 1px solid var(--rule); text-align: center; white-space: nowrap; }
.gr-table thead th { border-bottom: 1.5px solid var(--ink); font-size: .84rem; vertical-align: bottom; }
.gr-table tfoot th, .gr-table tfoot td { border-top: 1.5px solid var(--ink); border-bottom: 0; font-weight: 700; }
.gr-table .gr-qui { position: sticky; left: 0; z-index: 1; background: var(--bg); text-align: left; font-weight: 600; }
.gr-table .gr-moy { font-weight: 700; }
.gr-col {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px; max-width: 150px; padding: 0; border: 0;
  background: none; color: var(--ink); font: inherit; font-weight: 700; cursor: pointer;
}
.gr-col > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.gr-col:not(.gr-devoir) { flex-direction: row; gap: .45em; }
.gr-col small { color: var(--muted); font-weight: 600; }
.gr-col:hover > span { text-decoration: underline; }
.gr-case { min-width: 3em; padding: 2px 6px; border: 0; border-radius: 6px; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.gr-case:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }

/* ---------- Rendu d'un travail (panneau d'une tâche, Settings › Progress › Personal) ---------- */
.panel-rendu { margin: 28px 0 6px; }
.panel-rendu[hidden] { display: none; }
.rd-titre { display: flex; align-items: baseline; gap: .8em; }
.rd-etat { font-family: var(--f-text); font-stretch: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); }
.rd-etat.is-ok { color: var(--ink); }
.rd-etat.is-late { color: var(--late); }
.rd-texte { min-height: 2.4em; margin-bottom: 10px; }
.rd-fichiers { margin-bottom: 12px; }
.rd-fichiers:empty { display: none; }
.rd-actions { display: flex; justify-content: flex-end; gap: 8px; }
.rd-liste { display: grid; }
.rd-ligne { padding: 10px 0; border-top: 1px solid var(--rule); }
.rd-ligne:first-child { padding-top: 0; border-top: 0; }
.rd-qui { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font-size: .95rem; }
.rd-qui .rd-etat { font-size: .86rem; white-space: nowrap; }
.rd-com { margin: 4px 0 0; color: var(--muted); font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.rd-ligne .fichiers { margin-top: 7px; }
/* Note et retour : saisis par l'admin dans la liste, lus par l'élève sous son rendu */
.rd-eval { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; }
.rd-note {
  display: inline-flex; align-items: baseline; gap: .3em; flex: none; padding: .22em .55em;
  border: 1.5px solid var(--rule); border-radius: 8px; font-weight: 600; transition: border-color .15s ease;
}
.rd-note:focus-within { border-color: var(--ink); }
.rd-note input { width: 2.6em; padding: 0; border: 0; outline: none; background: none; color: var(--ink); font: inherit; text-align: right; }
.rd-note input::placeholder { color: var(--muted); }
.rd-note span { color: var(--muted); font-size: .86rem; }
.rd-retour-champ {
  flex: 1; min-width: 0; padding: .3em 0; border: 0; outline: none; resize: none; overflow: hidden;
  background: none; color: var(--ink); font: inherit; font-size: .92rem; line-height: 1.5;
}
.rd-retour-champ::placeholder { color: var(--muted); opacity: .6; }
.rd-com-lu { margin: 0 0 10px; color: var(--ink); font-size: 1rem; }
.rd-eval-lu { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.rd-eval-lu[hidden] { display: none; }
.rd-note-lue { font-family: var(--f-display); font-stretch: 72%; font-size: 1.5rem; line-height: 1; }
.rd-note-lue small { font-size: .9rem; color: var(--muted); }
.pg-auteur { display: inline-flex; align-items: center; gap: .35em; }
.pg-auteur .i { width: 13px; height: 13px; }

/* ---------- Aperçu intégré (Docs, Sheets, Slides, Drive, Figma, YouTube) ---------- */
.ap-scrim {
  position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: clamp(10px, 3vw, 40px);
  background: rgba(0,0,0,.55); animation: fondu .16s ease both;
}
.ap { display: flex; flex-direction: column; width: min(1200px, 100%); height: min(860px, 100%); box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.ap-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; }
.ap-head > .i { width: 18px; height: 18px; flex: none; }
.ap-head b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
.ap iframe { flex: 1; width: 100%; border: 0; background: #fff; }

/* ---------- Rechercher partout (Ctrl + K) ---------- */
.kp-scrim { position: fixed; inset: 0; z-index: 96; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; background: rgba(0,0,0,.42); animation: fondu .14s ease both; }
.kp { width: min(620px, 100%); max-height: 70vh; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.45); animation: panel-in .18s var(--ease); }
.kp-champ { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.kp-champ .i { width: 18px; height: 18px; color: var(--paper-muted); }
.kp-champ input { flex: 1; min-width: 0; border: 0; background: none; color: var(--paper-ink); font: inherit; font-size: 1.15rem; outline: none; }
.kp-champ input::-webkit-search-cancel-button { display: none; }
.kp-champ kbd { border-color: var(--rule); color: var(--paper-muted); }
.kp-liste { overflow-y: auto; padding: 6px; }
.kp-titre { margin: 10px 10px 4px; font-size: .72rem; color: var(--paper-muted); }
.kp-item {
  display: flex; align-items: center; gap: .75em; width: 100%; padding: .55em .7em; border: 0; border-radius: 9px;
  background: none; color: var(--paper-ink); font: inherit; font-size: 1rem; font-weight: 600; text-align: left; cursor: pointer;
}
.kp-item .i { width: 16px; height: 16px; flex: none; color: var(--paper-muted); }
.kp-item.is-active { background: color-mix(in srgb, var(--paper-ink) 10%, transparent); }
.kp-item.is-done .kp-label { color: var(--paper-muted); text-decoration: line-through; }
.kp-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-item small { flex: none; font-weight: 400; font-size: .84rem; color: var(--paper-muted); }
.kp-vide { margin: 0; padding: 18px; color: var(--paper-muted); }

/* ---------- « Set up the project » (app.js : configurer), après « New project » ---------- */
.cf-scrim { position: fixed; inset: 0; z-index: 96; display: flex; justify-content: center; align-items: center; padding: 16px; background: rgba(0,0,0,.42); animation: fondu .14s ease both; }
.cf { width: min(520px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 14px 18px 18px; box-shadow: 0 30px 80px rgba(0,0,0,.45); animation: panel-in .18s var(--ease); }
.cf-tete { display: flex; align-items: center; gap: 6px; min-height: 26px; }
.cf-tete .icon-btn { color: var(--paper-muted); }
.cf-tete .icon-btn:hover { color: var(--paper-ink); }
.cf-sur { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; color: var(--paper-muted); }
.cf-titre { margin: 6px 0 16px; font-family: var(--f-display); font-stretch: 72%; font-weight: 800; font-size: 1.7rem; line-height: 1; text-transform: uppercase; letter-spacing: .02em; }
.cf-opts { display: flex; flex-direction: column; gap: 8px; }
.cf-opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 14px; border: 0; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px var(--rule); background: none; color: var(--paper-ink); font: inherit; text-align: left; cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.cf-opt:hover, .cf-opt:focus-visible { background: color-mix(in srgb, var(--paper-ink) 8%, transparent); outline: none; }
.cf-opt[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--paper-ink); background: color-mix(in srgb, var(--paper-ink) 6%, transparent); }
.cf-opt > .i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--paper-muted); }
.cf-opt[aria-pressed="true"] > .i { color: var(--paper-ink); }
.cf-opt b { display: block; font-size: 1.02rem; }
.cf-opt small { display: block; margin-top: 3px; font-size: .86rem; line-height: 1.35; color: var(--paper-muted); }
/* Outils : plusieurs choix, une case à droite */
.cf-opt > span { flex: 1; min-width: 0; }
.cf-coche { flex: none; display: grid; place-items: center; width: 20px; height: 20px; align-self: center; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--rule); color: transparent; }
.cf-coche .i { width: 14px; height: 14px; stroke-width: 2.2; }
.cf-opt[aria-pressed="true"] .cf-coche { background: var(--paper-ink); box-shadow: none; color: var(--paper); }
.cf-liste { padding: 0; }
.cf-liste .pr-row:first-child { border-top: 0; }
.cf-pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.cf-note { margin: 0; font-size: .82rem; color: var(--paper-muted); }
@media (max-width: 520px) {
  .cf-scrim { align-items: flex-start; }
  .cf { padding: 12px 14px 16px; }
  .cf-titre { font-size: 1.45rem; }
}

/* ---------- Choisir une tâche ou une page ---------- */
.cible { width: 300px; padding: 4px; }
.cible input { width: 100%; margin-bottom: 4px; padding: .55em .7em; border: 1.5px solid var(--rule); border-radius: 8px; background: none; color: var(--paper-ink); font: inherit; outline: none; }
.cible input:focus { border-color: var(--paper-ink); }
.cible-liste { max-height: 300px; overflow-y: auto; }
.mention { width: 300px; }
.mention .pop-item .i { width: 16px; height: 16px; padding: 0; box-shadow: none; }

/* ---------- Réglages : intertitre « Modules » ---------- */
.pr-head { margin-top: 14px; }

/* ---------- États vides ---------- */
.vide { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 40px 0; color: var(--muted); }
.vide p { margin: 0; font-size: 1.05rem; }

/* ==========================================================================
   Pages
   ========================================================================== */
/* Les catégories côte à côte (colonnes équilibrées) sur un grand écran */
.pg-groupes { columns: 3 320px; column-gap: clamp(28px, 3.4vw, 56px); }
.pg-groupe { break-inside: avoid; padding-bottom: 30px; }
.pg-gtitre { display: flex; align-items: center; gap: .5em; margin: 0 0 8px; font-size: .78rem; color: var(--muted); }
.pg-liste { display: flex; flex-direction: column; }
.pg-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 10px; margin: 0 -10px; border-radius: 10px;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule);
  transition: background-color .15s ease;
}
.pg-row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.pg-row .i { width: 17px; height: 17px; flex: none; color: var(--muted); }
.pg-row-titre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.1rem; font-weight: 600; }
.pg-row-titre.is-vide { color: var(--muted); }
.pg-row small { flex: none; color: var(--muted); font-size: .86rem; }

.view-page { max-width: 860px; }
.pg-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 18px; font-size: .9rem; color: var(--muted); }
.pg-fil a { color: inherit; text-decoration: none; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-fil a:hover { color: var(--ink); }
.pg-fil i { font-style: normal; opacity: .5; }
.pg-tete { display: flex; align-items: flex-start; gap: 10px; }
.pg-titre { flex: 1; min-width: 0; margin: 0; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; outline: none; overflow-wrap: anywhere; }
.pg-titre:empty::before { content: attr(data-ph); color: var(--muted); opacity: .5; }
.pg-tete .ibtn { margin-top: 6px; }
.pg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 20px; font-size: .9rem; }
.pg-meta .chip { cursor: pointer; background: none; color: var(--ink); font: inherit; font-size: .84rem; font-weight: 600; }
.pg-meta .chip:disabled { cursor: default; }
.chip-vide { border-style: dashed; color: var(--muted) !important; }
.chip-vide .i { width: 11px; height: 11px; }
/* Couverture : un panneau de la couleur de la catégorie (chemin, titre, catégorie) */
.pg-couv { display: flex; flex-direction: column; min-height: clamp(190px, 22vw, 260px); margin-bottom: 22px; padding: clamp(18px, 2.4vw, 28px); }
.pg-couv .pg-fil { margin-bottom: 16px; }
.pg-couv .pg-tete { flex: 1; }
.pg-couv .pg-meta { margin: 18px 0 0; }
.pg-couv .pg-meta .chip { border-color: transparent; background: color-mix(in srgb, #fff 45%, transparent); }
.pg-couv .pg-meta .chip.chip-vide { border-color: var(--rule); background: none; }
.pg-corps { min-height: 200px; }
.pg-corps.is-lecture .blk-handle, .pg-corps.is-lecture .editor-tail { display: none; }

/* Blocs verrouillés (projet de groupe) : un cadenas à droite de chaque bloc pour l'auteur et les admins
   (fermé : verrouillé, cliquer le déverrouille ; ouvert, au survol : cliquer le verrouille) ; pour les
   autres, une marque au survol des blocs verrouillés, qui sont figés */
.blk.is-lock, .blk.is-gere { padding-right: 24px; }
.blk-cadenas.is-ouvert { opacity: 0; }
.blk.is-gere:hover > .blk-cadenas.is-ouvert, .blk-cadenas.is-ouvert:focus-visible { opacity: .45; }
@media (hover: none) { .blk-cadenas.is-ouvert { opacity: .3; } }
.blk-cadenas {
  position: absolute; top: .3em; right: 0; display: grid; place-items: center; width: 20px; height: 22px; padding: 0;
  border: 0; border-radius: 5px; background: none; color: var(--muted); opacity: .55; cursor: pointer; transition: opacity .12s ease;
}
.blk-cadenas .i { width: 12px; height: 12px; }
button.blk-cadenas:hover { opacity: 1; background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); }
span.blk-cadenas { opacity: 0; cursor: default; }
.blk.is-fige:hover > span.blk-cadenas { opacity: .45; }
.blk.is-fige .blk-text { cursor: default; }
/* Page à copies : les blocs ouverts sont les champs de réponse */
.blk.is-zone > .blk-body {
  padding: 0 8px; border-radius: 8px; background: color-mix(in srgb, var(--focus) 9%, transparent);
  box-shadow: inset 2px 0 0 color-mix(in srgb, var(--focus) 60%, transparent);
}
.blk.is-zone[data-type="p"] .blk-text:empty:not(:focus)::before { content: attr(data-ph); }
.blk.is-zone + .blk.is-zone { margin-top: 2px; }

/* Page à copies : bandeau (copies des membres, échéance, fermer) et copie d'un membre */
.pg-copies { margin: -6px 0 22px; padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; }
.pg-copies[hidden] { display: none; }
.pg-cp-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.pg-cp-titre { margin: 0; }
.pg-cp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.pg-cp-actions .chip { cursor: pointer; background: none; color: var(--ink); font: inherit; font-size: .84rem; font-weight: 600; }
.pg-cp-ouvrir, .pg-cp-action { margin-left: auto; }
.pg-cp-ech { display: inline-flex; align-items: center; gap: .35em; }
.pg-cp-ech .i, .pg-cp-qui .i { width: 13px; height: 13px; }
.pg-cp-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 0 18px; margin-top: 12px; }
.pg-cp-ligne { display: flex; align-items: center; gap: 2px; min-width: 0; padding: 0 0 0 2px; border-top: 1px solid var(--rule); }
.pg-cp-lien {
  flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; padding: 7px 0;
  color: var(--ink); font-size: .92rem; text-decoration: none;
}
.pg-cp-ligne b { display: inline-flex; align-items: center; gap: .35em; min-width: 0; font-weight: 600; }
.pg-cp-ligne b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-cp-lien:hover b span { text-decoration: underline; text-underline-offset: .15em; }
.pg-cp-ligne .rd-etat { font-size: .84rem; white-space: nowrap; }
.pg-cp-ligne.is-retire .pg-cp-lien { opacity: .6; }
.pg-cp-retirer { flex: none; opacity: 0; }
.pg-cp-ligne:hover .pg-cp-retirer, .pg-cp-retirer:focus-visible { opacity: 1; }
@media (hover: none) { .pg-cp-retirer { opacity: .6; } }
.pg-cp-vide { margin: 10px 0 0; font-size: .9rem; }
/* Ajouter des membres : une case par membre, « tout le monde », chercher (plus de 8) */
.pg-cp-choix { width: min(300px, calc(100vw - 32px)); }
.pg-cp-cherche { width: 100%; margin: 2px 0 6px; }
.pg-cp-cases { max-height: min(300px, 45vh); overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.pg-cp-case { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 4px; border-radius: 8px; cursor: pointer; font-size: .92rem; }
.pg-cp-case:hover { background: color-mix(in srgb, var(--paper-ink, var(--ink)) 7%, transparent); }
.pg-cp-case[hidden] { display: none; }
.pg-cp-case span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-cp-case input {
  flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin: 0; padding: 0;
  appearance: none; -webkit-appearance: none; border: 1.5px solid color-mix(in srgb, var(--paper-ink) 45%, transparent);
  border-radius: 4px; background: none; cursor: pointer;
}
.pg-cp-case input:checked, .pg-cp-case input:indeterminate { background: var(--paper-ink); border-color: var(--paper-ink); }
.pg-cp-case input:checked::after {
  content: ''; width: 8px; height: 4px; border: solid var(--paper); border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg);
}
.pg-cp-case input:indeterminate::after { content: ''; width: 8px; height: 2px; border-radius: 1px; background: var(--paper); }
.pg-cp-case input:focus-visible { outline: 2px solid var(--paper-ink); outline-offset: 2px; }
.pg-cp-tous { font-weight: 600; border-bottom: 1px solid var(--rule); border-radius: 8px 8px 0 0; margin-bottom: 2px; }
.pg-cp-ok { width: 100%; margin-top: 8px; justify-content: center; }
.pg-cp-rien { margin: 4px 0 2px; font-size: .9rem; }
.pg-cp-form input[type="datetime-local"] { font-weight: 600; color-scheme: light dark; }
.pg-cp-sans { margin-top: 6px; }
.pg-couv .pg-meta .pg-cp-action .btn { font-size: .84rem; }
.pg-row-etat.is-ok { color: var(--ink); opacity: .7; }
.pg-row-etat.is-late { color: var(--late); }

/* Bloc « Tasks » d'une page */
.it-liste { display: flex; flex-direction: column; }
.it-row { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--rule); cursor: pointer; }
.it-row:last-child { border-bottom: 0; }
.it-row small { margin-left: auto; color: var(--muted); font-size: .84rem; white-space: nowrap; }
.it-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.it-row.is-done .it-titre { color: var(--muted); text-decoration: line-through; }
.it-check { display: grid; place-items: center; flex: none; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
.it-add { display: flex; align-items: center; gap: 10px; padding: 8px 4px 2px; }
.it-add span { display: grid; place-items: center; width: 24px; color: var(--muted); }
.it-add span .i { width: 14px; height: 14px; }
.it-add input { flex: 1; min-width: 0; border: 0; background: none; color: var(--ink); font: inherit; outline: none; }

/* ==========================================================================
   Discussion
   ========================================================================== */
body[data-route="chat"] { overflow: hidden; }
/* Même écart en bas (champ de saisie, colonne rose) que sur les côtés */
.view-chat { height: calc(100dvh - var(--top-h)); padding-bottom: var(--vue-marge); }
.ch { display: flex; flex-direction: column; height: 100%; }
/* Le panneau rose : une bande (les salons défilent, Meet à droite, pas de titre) ; sur un écran large
   (même condition que le panneau vertical de style.css), une colonne à gauche : compte et titre en
   haut, Meet, puis les salons les uns sous les autres */
.ch-tete.panneau { flex-wrap: nowrap; align-items: center; gap: 10px; min-height: 0; margin: 0 0 4px; padding: 8px 10px; }
.ch-tete.panneau > * { align-self: center; }
.ch-tete .ch-titre { display: none; }
.ch-tete .ch-salons { order: 1; }
.ch-tete .ch-meet { order: 2; margin-left: 0; }
.ch-salons { flex: 1; min-width: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
@media (min-width: 1280px) and (min-aspect-ratio: 16/9) {
  .ch { display: grid; grid-template-columns: var(--cote-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: clamp(20px, 2vw, 28px); }
  .ch-fil, .ch-saisie { grid-column: 2; }
  .view-chat[data-cote] .ch-tete.panneau {
    grid-row: 1 / 3; flex-flow: column nowrap; align-items: stretch; gap: 18px; margin: 0; padding: clamp(18px, 2.4vw, 30px);
  }
  .view-chat[data-cote] .ch-tete .ch-titre { display: block; }
  .view-chat[data-cote] .ch-tete.panneau .ch-meet { order: 0; align-self: flex-start; }
  .view-chat[data-cote] .ch-tete.panneau .ch-salons {
    order: 1; flex: 1 1 auto; align-self: stretch; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px;
    min-height: 0; margin: 0 -4px; padding: 0 4px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin;
  }
  .view-chat .ch-salons .chip-f { justify-content: flex-start; min-width: 0; }
  .view-chat .ch-salons .ch-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .view-chat .ch-salons .ch-badge { margin-left: auto; }
}
.ch-salons .chip-f { flex: none; text-decoration: none; color: var(--ink); white-space: nowrap; }
/* Beaucoup de salons (une classe et ses matières) : sur plusieurs lignes, sauf sur mobile (on fait défiler) */
@media (min-width: 721px) { .ch-salons { flex-wrap: wrap; } }
.ch-salons .chip-f.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.ch-badge {
  display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 .35em; border-radius: 999px;
  background: var(--accent-bg); color: var(--accent-ink); font-style: normal; font-size: .72rem; font-weight: 700;
}
.ch-meet { flex: none; }
.ch-fil { flex: 1; min-height: 0; overflow-y: auto; padding: 10px 0 18px; }
.ch-jour { display: flex; align-items: center; gap: 12px; margin: 18px 0 8px; font-size: .78rem; color: var(--muted); }
.ch-jour::before, .ch-jour::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.ch-msg { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 6px 8px; margin-top: 8px; border-radius: 10px; }
.ch-msg.is-suite { margin-top: 0; padding-top: 2px; padding-bottom: 2px; }
.ch-msg:hover { background: color-mix(in srgb, var(--ink) 4.5%, transparent); }
.ch-av {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--dot); color: #141414; font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: .9rem;
}
.ch-h { align-self: center; justify-self: center; font-size: .7rem; color: var(--muted); opacity: 0; transition: opacity .12s ease; }
.ch-msg:hover .ch-h { opacity: 1; }
.ch-qui { display: flex; align-items: baseline; gap: 8px; margin: 0 0 2px; }
.ch-qui b { font-size: .98rem; }
.ch-qui span { font-size: .78rem; color: var(--muted); }
.ch-texte { font-size: 1.02rem; line-height: 1.45; overflow-wrap: anywhere; outline: none; }
.ch-texte[contenteditable="true"] { padding: 6px 10px; border: 1.5px solid var(--ink); border-radius: 8px; }
.ch-texte a:not(.ref) { text-underline-offset: .15em; }
.ch-modif, .ch-aide { color: var(--muted); font-size: .78rem; }
.ch-aide { margin: 4px 0 0; }
.ch-actions {
  position: absolute; top: -12px; right: 8px; display: flex; gap: 2px; padding: 2px; border-radius: 9px;
  background: var(--bg); box-shadow: 0 0 0 1px var(--rule), 0 6px 16px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
}
.ch-actions:empty { display: none; }
.ch-msg:hover .ch-actions, .ch-actions:focus-within { opacity: 1; pointer-events: auto; }
.ch-actions .ibtn { width: 30px; height: 30px; border-radius: 7px; }
.ch-actions .ibtn .i { width: 15px; height: 15px; }
.ch-vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; height: 100%; color: var(--muted); }
.ch-vide .i { width: 28px; height: 28px; }
.ch-saisie { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 16px; overflow: visible; }
.ch-champ { flex: 1; min-width: 0; max-height: 30vh; overflow-y: auto; padding: 9px 0; font-size: 1.02rem; line-height: 1.4; outline: none; overflow-wrap: anywhere; }
.ch-champ:empty::before { content: attr(data-ph); color: var(--paper-muted); pointer-events: none; }
.ch-envoyer { width: 40px; height: 40px; color: var(--paper-ink); }
@media (max-width: 720px) {
  .view-chat { padding-left: 8px; padding-right: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .ch-meet span { display: none; }
}

/* ==========================================================================
   Tableaux
   ========================================================================== */
.tb-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 18px; }
.tb-carte { display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 12px; text-decoration: none; transition: transform .15s var(--ease), box-shadow .15s ease; }
.tb-carte:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.tb-apercu {
  position: relative; height: 120px; border-radius: 8px; overflow: hidden;
  background: color-mix(in srgb, var(--paper-ink) 6%, transparent)
    radial-gradient(circle, color-mix(in srgb, var(--paper-ink) 18%, transparent) .8px, transparent 1px) 0 0 / 10px 10px;
}
.tb-mini { position: absolute; border-radius: 2px; background: color-mix(in srgb, var(--paper-ink) 28%, transparent); }
.tb-mini-note { background: var(--dot); border-radius: 1.5px; }
.tb-mini-image { background: color-mix(in srgb, var(--paper-ink) 45%, transparent); }
.tb-mini-texte { background: color-mix(in srgb, var(--paper-ink) 55%, transparent); max-height: 3px; }
.tb-mini-forme { background: var(--dot); border-radius: 2px; opacity: .9; }
.tb-mini-groupe { background: color-mix(in srgb, var(--paper-ink) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--paper-ink) 30%, transparent); border-radius: 3px; }
.tb-carte-titre { display: flex; align-items: center; gap: 8px; margin: 4px 2px 0; font-weight: 700; font-size: 1.08rem; }
.tb-carte-titre .i { width: 15px; height: 15px; color: var(--paper-muted); }
.tb-carte-titre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-carte small { margin: 0 2px; color: var(--paper-muted); font-size: .84rem; }
.tb-carte small span { display: inline-flex; align-items: center; gap: .35em; }

/* Un tableau ouvert occupe l'écran ; la liste des tableaux, elle, défile */
body[data-route="tableaux"]:has(.view-tableau) { overflow: hidden; }
/* Les messages passent au-dessus de la barre d'outils (et de la zone de saisie) */
body[data-route="tableaux"]:has(.view-tableau) .toasts { bottom: 86px; }
body[data-route="chat"] .toasts { bottom: 96px; }
.view-tableau { max-width: none; height: calc(100dvh - var(--top-h)); padding: 0; }
.view-tableau > * { animation: none; }
.tb { position: relative; height: 100%; overflow: hidden; }
.tb-tete {
  position: absolute; top: 12px; left: clamp(12px, 2vw, 24px); right: clamp(12px, 2vw, 24px); z-index: 5;
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.tb-tete > * { pointer-events: auto; }
.tb-tete .pg-fil { margin: 0; }
.tb-titre {
  min-width: 2ch; max-width: 40vw; margin: 0 auto 0 0; padding: 2px 6px; border-radius: 6px;
  font-family: var(--f-display); font-stretch: 72%; font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: .03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; outline: none;
  background: color-mix(in srgb, var(--bg) 70%, transparent);
}
.tb-titre:empty::before { content: attr(data-ph); color: var(--muted); }
.tb-titre:focus { overflow: visible; text-overflow: clip; box-shadow: 0 0 0 1.5px var(--rule); }
.tb-zoom { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 80%, transparent); box-shadow: inset 0 0 0 1px var(--rule); }
.tb-zoom .ibtn { width: 30px; height: 30px; }
.tb-zoom .ibtn .i { width: 14px; height: 14px; }
/* La grille du tableau (en haut ; .tb-grille, elle, range les cartes de #/boards) */
.tb-quadri {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 80%, transparent); box-shadow: inset 0 0 0 1px var(--rule);
  color: var(--ink); font: inherit; font-size: .86rem; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.tb-quadri:hover { background: color-mix(in srgb, var(--ink) 8%, var(--bg)); }
.tb-quadri .i { width: 15px; height: 15px; color: var(--muted); }
.tb-pc { min-width: 54px; border: 0; background: none; color: var(--ink); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.tb-tete > .ibtn { background: color-mix(in srgb, var(--bg) 80%, transparent); }

.tb-zone {
  position: absolute; inset: 0; overflow: hidden; outline: none; touch-action: none; cursor: default;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--ink) 17%, transparent) 1px, transparent 1.3px);
}
.tb-zone.is-main, .tb-zone.is-main * { cursor: grab !important; }
.tb-zone.is-pan, .tb-zone.is-pan * { cursor: grabbing !important; }
.tb-zone[data-outil="note"], .tb-zone[data-outil="texte"], .tb-zone[data-outil="groupe"],
.tb-zone[data-outil="rect"], .tb-zone[data-outil="ellipse"] { cursor: crosshair; }
.tb-zone[data-outil="fleche"] .te { cursor: alias; }
.tb-zone.is-depot { box-shadow: inset 0 0 0 3px var(--focus); }
.tb-monde { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
/* Flèches : au-dessus des groupes (z 1…), sous les autres éléments (z 100…) ; trait et pointe d'une couleur opaque */
.tb-fleches { position: absolute; left: 0; top: 0; z-index: 50; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.tb-fl { color: color-mix(in srgb, var(--ink) 66%, var(--bg)); transition: color .15s ease; }
.tb-fl-trait { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tb-fl-tete { fill: currentColor; stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.tb-fl-zone { fill: none; stroke: transparent; stroke-width: 16; pointer-events: stroke; cursor: pointer; }
.tb-fl:hover { color: var(--ink); }
.tb-fl.is-sel { color: var(--focus); }
.tb-fl.is-sel .tb-fl-trait { stroke-width: 2.6; }
/* Groupe en cours de tracé (outil Groupe) */
.tb-trace {
  position: absolute; z-index: 999; border: calc(1.5px / var(--z, 1)) dashed var(--focus); border-radius: 14px;
  background: color-mix(in srgb, var(--focus) 7%, transparent); pointer-events: none;
}
.tb-trace[hidden] { display: none; }
/* Cadre de sélection (outil Sélection, glisser sur le fond) */
.tb-trace.is-lasso {
  border: calc(1px / var(--z, 1)) solid var(--focus); border-radius: calc(3px / var(--z, 1));
  background: color-mix(in srgb, var(--focus) 10%, transparent);
}
.tb-trace.is-ellipse { border-radius: 50%; }

.te { position: absolute; border-radius: 10px; cursor: grab; user-select: none; }
/* Sélection et poignée : même taille à l'écran quel que soit le zoom (--z, posé par boards.js) */
.te.is-sel { outline: calc(2px / var(--z, 1)) solid var(--focus); outline-offset: calc(3px / var(--z, 1)); }
.te.is-source { outline: calc(2px / var(--z, 1)) dashed var(--accent-bg); outline-offset: calc(4px / var(--z, 1)); }
.te-texte { width: 100%; height: 100%; overflow: hidden; outline: none; overflow-wrap: anywhere; }
.te.is-edit .te-texte { cursor: text; user-select: text; overflow: auto; }
.te-texte:empty::before { content: attr(data-ph); opacity: .45; }
.te.is-bloque { cursor: default; }
/* Note (120 × 80 posée d'un clic, jusqu'à 60 × 60) : texte de 16 px (sa taille se règle, comme son alignement et
   son ancrage) ; petite, sa marge rapetisse (requête sur sa taille) */
.te-note {
  container-type: size; background: var(--dot); color: #161616;
  box-shadow: 0 1px 0 rgba(0,0,0,.12), 0 10px 24px -10px rgba(0,0,0,.5);
  font-size: 16px; line-height: 1.32; font-weight: 600;
}
.te-note .te-texte { padding: 12px 14px; }
/* Couleur libre foncée (data-fonce) : texte clair (thème clair : la note s'éclaircit, il reste sombre) */
.te-note[data-fonce], .te-forme[data-fonce]:not(.is-vide) { color: #f4f1ea; }
:root[data-theme="clair"] .te-note[data-fonce], :root[data-theme="clair"] .te-forme[data-fonce]:not(.is-vide) { color: #161616; }
@container (max-width: 100px) { .te-note .te-texte { padding: 8px 9px; } }
/* Groupe (cadre façon Figma) : une barre (titre, verrou, masquer, réglages), grande pour se lire de loin (140 px :
   TETE dans boards.js ; son corps commence sur le quadrillage) ; replié, il n'est plus qu'elle */
.te-groupe {
  border-radius: 14px; cursor: default;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 15%, transparent);
}
.te-groupe.is-replie {
  background: color-mix(in srgb, var(--ink) 7%, var(--bg));
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 18%, transparent), 0 10px 24px -14px rgba(0,0,0,.6);
}
.tg-tete {
  position: absolute; left: 0; right: 0; top: 0; height: 140px; display: flex; align-items: center; gap: 32px;
  padding: 0 20px 0 48px; border-radius: 14px 14px 0 0; cursor: grab;
}
.te-groupe.is-verrou .tg-tete, .te-groupe.is-bloque .tg-tete, .tb.is-lecture .tg-tete { cursor: default; }
.tg-titre {
  min-width: 2ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; outline: none;
  color: var(--ink); font-weight: 700; font-size: 3.68rem; line-height: 1.2;
}
.tg-titre:empty::before { content: attr(data-ph); color: var(--muted); font-weight: 600; }
.te-groupe.is-edit .tg-titre { cursor: text; user-select: text; text-overflow: clip; }
.tg-n { color: var(--muted); font-size: 3.2rem; white-space: nowrap; }
.tg-btns { display: flex; gap: 8px; margin-left: auto; }
.tg-btn {
  display: grid; place-items: center; width: 104px; height: 104px; padding: 0; border: 0; border-radius: 32px;
  background: none; color: var(--muted); cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.tg-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--ink); }
.tg-btn[aria-pressed="true"] { color: var(--ink); }
.tg-btn:disabled { opacity: .45; cursor: default; }
.tg-btn.is-fixe { cursor: default; }
.tg-btn .i { width: 60px; height: 60px; }
/* Texte ou note ancré au milieu ou en bas de sa boîte */
.te-txt[data-ancre], .te-note[data-ancre] { display: flex; flex-direction: column; justify-content: center; }
.te-txt[data-ancre="bottom"], .te-note[data-ancre="bottom"] { justify-content: flex-end; }
.te-txt[data-ancre] .te-texte, .te-note[data-ancre] .te-texte { height: auto; max-height: 100%; flex: none; }
.te-txt { padding: 4px 6px; color: var(--ink); font-size: 1.2rem; line-height: 1.3; font-weight: 600; }
/* Forme (rectangle, ellipse ; ses points se modifient) : son tracé, le texte au milieu ; seul le tracé se clique */
.te-forme { display: grid; align-items: center; pointer-events: none; border-radius: 0; color: #161616; font-size: 1.04rem; line-height: 1.32; font-weight: 600; }
.tf-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tf-fond { fill: var(--dot); stroke: none; pointer-events: all; cursor: grab; }
.te-forme.is-vide { color: var(--ink); }
.te-forme.is-vide .tf-fond { fill: none; stroke: var(--dot); stroke-width: 2.5; }
.te-forme .te-texte { position: relative; z-index: 1; height: auto; max-height: 100%; padding: 8px 12px; text-align: center; pointer-events: none; }
.te-forme.is-edit .te-texte, .te-forme .te-poignee { pointer-events: auto; }
.te-forme.is-bloque .tf-fond, .tb.is-lecture .tf-fond { cursor: default; }
/* Ses points (taille fixe à l'écran) ; au milieu de chaque côté, un petit rond pour en ajouter un */
.tf-pt, .tf-mid { position: absolute; z-index: 2; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: auto; }
.tf-pt {
  width: calc(11px / var(--z, 1)); height: calc(11px / var(--z, 1)); background: var(--bg);
  box-shadow: 0 0 0 calc(2px / var(--z, 1)) var(--focus); cursor: move;
}
.tf-pt.is-choisi { background: var(--focus); }
.tf-mid { width: calc(8px / var(--z, 1)); height: calc(8px / var(--z, 1)); background: var(--focus); opacity: .5; cursor: copy; }
.tf-mid:hover { opacity: 1; }
.te-image { overflow: visible; }
.te-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; pointer-events: none; box-shadow: 0 10px 24px -12px rgba(0,0,0,.6); }
.te-carte, .te-lien {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 10px 14px;
  border: 1.5px solid var(--rule); background: color-mix(in srgb, var(--ink) 6%, var(--bg)); color: var(--ink);
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.6);
}
.te-carte[data-tone] { border-left: 5px solid var(--dot); }
.te-carte > .i, .te-carte > svg, .te-lien > .i { grid-row: span 2; width: 18px; height: 18px; color: var(--muted); }
.te-c-titre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 1rem; }
.te-carte small, .te-lien small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .82rem; }
.te-carte.is-done .te-c-titre { color: var(--muted); text-decoration: line-through; }
.te-carte.is-gone { opacity: .6; }
.te-poignee {
  position: absolute; right: calc(-7px / var(--z, 1)); bottom: calc(-7px / var(--z, 1));
  width: calc(12px / var(--z, 1)); height: calc(12px / var(--z, 1)); border-radius: calc(3px / var(--z, 1));
  background: var(--bg); box-shadow: 0 0 0 calc(2px / var(--z, 1)) var(--focus); cursor: nwse-resize; display: none;
}
.te.is-sel .te-poignee { display: block; }
.tb.is-lecture .te { cursor: default; }

/* Les autres membres sur le tableau : leur souris (taille fixe à l'écran : --z) et ce qu'ils ont choisi */
.tb-presences { position: absolute; left: 0; top: 0; z-index: 1000; width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.tp-sel { position: absolute; border-radius: 10px; outline: calc(2px / var(--z, 1)) solid var(--dot); outline-offset: calc(3px / var(--z, 1)); }
.tp-souris { position: absolute; left: 0; top: 0; transition: transform .2s linear; will-change: transform; }
.tp-souris[hidden] { display: none; }
.tp-echelle { transform: scale(calc(1 / var(--z, 1))); transform-origin: 0 0; }
.tp-fl { display: block; width: 16px; height: 20px; overflow: visible; filter: drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
.tp-fl path { fill: var(--dot); stroke: var(--on-dot); stroke-width: 1.2; stroke-linejoin: round; }
.tp-nom {
  position: absolute; left: 13px; top: 18px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--dot); color: var(--on-dot); font-size: .76rem; font-weight: 700; line-height: 1.35;
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.5);
}
/* Qui est sur le tableau (en haut) */
.tb-qui { display: flex; align-items: center; }
.tb-qui:empty { display: none; }
.tb-av {
  display: grid; place-items: center; width: 28px; height: 28px; margin-left: -6px; border-radius: 50%;
  background: var(--dot); color: var(--on-dot); font-size: .7rem; font-weight: 800; box-shadow: 0 0 0 2px var(--bg);
}
.tb-av:first-child { margin-left: 0; }
.tb-av-plus { background: var(--rule); color: var(--ink); }

.tb-outils {
  position: absolute; left: 50%; bottom: 18px; z-index: 6; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; padding: 6px; border-radius: 14px; overflow: visible;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.tb-seg, .tb-ctx { display: flex; align-items: center; gap: 2px; }
.tb-outils button {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--paper-ink); cursor: pointer; transition: background-color .15s ease;
}
.tb-outils button:hover { background: color-mix(in srgb, var(--paper-ink) 10%, transparent); }
.tb-outils button[aria-pressed="true"] { background: var(--paper-ink); color: var(--paper); }
.tb-outils button .i { width: 18px; height: 18px; }
.tb-outils .tb-ton { width: 30px; }
.tb-ton .dot { width: 16px; height: 16px; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.15); }
/* Couleur des choisis : un anneau autour de sa pastille ; « More colors » : une pastille de toutes les couleurs, qui
   ouvre dix couleurs de plus (.tt-pastille), celles déjà prises dans le tableau et une au choix */
.tb-outils .tb-ton[aria-pressed="true"] { background: none; color: inherit; }
.tb-ton[aria-pressed="true"] .dot, .tt-pastille[aria-pressed="true"] .dot { box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.15), 0 0 0 2px var(--paper), 0 0 0 3.5px var(--paper-ink); }
.tb-ton-plus .dot, .tt-arc { background: conic-gradient(#f07a6e, #f2cf55, #b3d155, #6fd3b0, #73c2ec, #8a9cf0, #bea5ea, #ea88bc, #f07a6e); }
.pop-teintes { padding: 8px 6px 6px; }
.tt-rang { display: grid; grid-template-columns: repeat(5, 32px); gap: 2px; padding: 0 3px; }
.tt-pastille { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.tt-pastille:hover, .tt-pastille:focus-visible { background: color-mix(in srgb, var(--paper-ink) 10%, transparent); outline: none; }
.tt-pastille .dot { width: 18px; height: 18px; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.15); }
.tt-arc { width: 16px; height: 16px; }
.tb-sep { width: 1px; height: 24px; margin: 0 6px; background: var(--rule); }
/* Champs de nombre de la barre (arrondi d'une forme, taille d'un texte ou d'une note) : sans flèches, ils se règlent
   en glissant ou à la molette */
.tb-rayon { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 4px 0 8px; color: var(--paper-ink); }
.tb-rayon .i { width: 16px; height: 16px; opacity: .7; cursor: ew-resize; }
.tb-rayon input:not(:focus) { cursor: ew-resize; }
.tb-rayon input {
  appearance: textfield; -moz-appearance: textfield;
  width: 56px; height: 30px; padding: 0 6px; border: 0; border-radius: 8px; text-align: center;
  background: color-mix(in srgb, var(--paper-ink) 9%, transparent); color: inherit; font: inherit; font-size: .88rem;
}
.tb-rayon input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.tb-rayon input::-webkit-inner-spin-button, .tb-rayon input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* Les boutons d'un même axe sur un fond (l'alignement, horizontal ; l'ancrage, vertical) */
.tb-lot { display: flex; align-items: center; gap: 2px; margin-left: 4px; border-radius: 10px; background: color-mix(in srgb, var(--paper-ink) 9%, transparent); }
@media (max-width: 720px) {
  .tb-tete .pg-fil, .tb-zoom .ibtn, .tb-quadri span { display: none; }
  .tb-outils { bottom: 10px; max-width: calc(100vw - 16px); overflow-x: auto; }
  .tb-outils button { width: 36px; height: 36px; }
}

/* Thème clair : les pastilles sont foncées, les notes et les avatars restent clairs et lisibles */
:root[data-theme="clair"] .te-note,
:root[data-theme="clair"] .ch-av { background: color-mix(in srgb, var(--dot) 38%, #fbfaf6); }
:root[data-theme="clair"] .tb-mini-note { background: color-mix(in srgb, var(--dot) 55%, #fbfaf6); }
:root[data-theme="clair"] .te-forme:not(.is-vide) .tf-fond { fill: color-mix(in srgb, var(--dot) 38%, #fbfaf6); }

/* ==========================================================================
   Home : grille de widgets (6 colonnes, rangées de --hm-rang ; data-cols : 3 = tiers,
   2 = moitiés, 1 = une colonne à hauteur libre). --w / --h posés par home.js.
   ========================================================================== */
.hm-pied { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.hm-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.hm-actions .btn { margin: 0; }
.hm {
  --hm-rang: 44px;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: var(--hm-rang);
  grid-auto-flow: row dense; gap: 16px;
}
.hm[data-cols="1"] { grid-auto-rows: auto; }
.hm-s {
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  grid-column: span var(--w, 2); grid-row: span var(--h, 4);
  padding: 14px 16px 10px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rule);
}
.hm[data-cols="1"] .hm-s { grid-column: 1 / -1; grid-row: auto; }
.hm-titre { flex: none; align-items: center; }
.hm-titre > span:not(.hm-poignee) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-corps {
  flex: 1; min-height: 0; margin: 0 -8px; padding: 0 8px; overflow: hidden auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--rule) transparent;
}
.hm[data-cols="1"] .hm-corps { overflow: visible; }
.hm[data-cols="1"] .hm-agenda .hm-corps, .hm[data-cols="1"] .hm-drive .hm-corps { max-height: 460px; overflow: hidden auto; }
.hm-rien { grid-column: 1 / -1; grid-row: span 4; }
.hm-s.is-neuf { animation: hm-neuf 1.2s ease; }
@keyframes hm-neuf { from { box-shadow: inset 0 0 0 2px var(--accent); } }

/* Mode édition (clé anglaise) : on attrape un widget pour le déplacer, le coin pour le redimensionner */
.hm.is-edition .hm-s {
  background: color-mix(in srgb, var(--ink) 3%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--ink) 30%, transparent);
  cursor: grab; user-select: none; touch-action: pan-y; transition: box-shadow .15s ease;
}
.hm.is-edition .hm-s:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.hm.is-edition .hm-corps { pointer-events: none; opacity: .5; overflow: hidden; }
.hm-poignee { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin: -3px -2px -3px -6px; color: var(--muted); touch-action: none; }
.hm-poignee .i { width: 14px; height: 14px; }
.hm-retirer { margin: -6px -6px -6px auto; }
.hm-retirer:hover { color: var(--ink); }
.hm-taille {
  position: absolute; right: 3px; bottom: 3px; width: 18px; height: 18px; border-radius: 0 0 9px 0; cursor: nwse-resize; touch-action: none;
  background: linear-gradient(135deg, transparent 52%, var(--muted) 52% 60%, transparent 60% 72%, var(--muted) 72% 80%, transparent 80%);
}
.hm-taille:hover { background-color: color-mix(in srgb, var(--ink) 8%, transparent); }
.hm[data-cols="1"] .hm-taille { display: none; }
.hm-s.is-place { background: none; box-shadow: none; outline: 1.5px dashed var(--muted); outline-offset: -1.5px; }
.hm-s.is-place > * { visibility: hidden; }
.hm-s.is-taille { box-shadow: inset 0 0 0 2px var(--ink); }
.hm-fantome {
  position: fixed; left: 0; top: 0; z-index: 900; margin: 0; pointer-events: none; cursor: grabbing;
  background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--ink), 0 18px 44px rgba(0, 0, 0, .38);
}
.hm-fantome .hm-corps { opacity: .5; overflow: hidden; }
html.is-hm-glisse, html.is-hm-glisse * { cursor: grabbing !important; user-select: none; }
html.is-hm-taille, html.is-hm-taille * { cursor: nwse-resize !important; user-select: none; }
.hm-ajout {
  grid-column: span 2; grid-row: span 3; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--radius); background: none; color: var(--muted); outline: 1.5px dashed var(--rule); outline-offset: -1.5px;
  font: inherit; font-weight: 600; cursor: pointer; transition: color .15s ease, outline-color .15s ease;
}
.hm-ajout:hover, .hm-ajout[aria-expanded="true"] { color: var(--ink); outline-color: var(--ink); }
.hm[data-cols="2"] .hm-ajout { grid-column: span 3; }
.hm[data-cols="1"] .hm-ajout { grid-column: 1 / -1; grid-row: auto; min-height: 72px; }
.hm-aller {
  display: grid; place-items: center; width: 26px; height: 26px; margin: -4px -4px -4px auto; border-radius: 7px;
  color: var(--muted); transition: color .15s ease, background-color .15s ease;
}
.hm-aller:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.hm-aller .i { width: 14px; height: 14px; }
.hm-vide { margin: 0; padding: 14px 0 4px; color: var(--muted); }
.hm-plus {
  display: inline-block; margin-top: 10px; padding: 0; border: 0; background: none; color: var(--muted);
  font: inherit; font-size: .88rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: color .15s ease;
}
.hm-plus:hover { color: var(--ink); }
.hm .row-title { font-size: 1.04rem; }
.hm-chat.has-new .hm-titre small { color: var(--accent); }

/* Drive : dossier du projet, boutons, fichiers joints partout */
.hm-dossier { display: flex; align-items: center; gap: 2px; margin-top: 10px; }
.hm-dos-main {
  display: flex; align-items: center; gap: .6em; flex: 1; min-width: 0; padding: .55em .6em .55em .3em; border: 0; border-radius: 9px;
  background: none; color: var(--ink); font: inherit; font-weight: 700; font-size: 1.06rem; text-align: left; cursor: pointer;
  transition: background-color .15s ease;
}
.hm-dos-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-dos-main .i { width: 18px; height: 18px; flex: none; }
.hm-dos-main:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.hm-dossier .ibtn { color: var(--muted); }
.hm-dossier .ibtn:hover { color: var(--ink); }
.hm-dos-add { margin-top: 12px; }
.hm-outils { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.hm-fichiers { display: flex; flex-direction: column; }
.hm-fi { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--rule); }
.hm-fi-main {
  display: flex; align-items: center; gap: .65em; flex: 1; min-width: 0; padding: 10px 2px; border: 0;
  background: none; color: var(--ink); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.hm-fi-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-fi-main .i { width: 16px; height: 16px; flex: none; color: var(--muted); }
.hm-fi-main:hover span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.hm-fi-ou {
  flex: 0 1 auto; max-width: 45%; padding: .22em .55em; border: 0; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: none; color: var(--muted); font: inherit; font-size: .84rem; cursor: pointer; transition: color .15s ease, background-color .15s ease;
}
.hm-fi-ou:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 7%, transparent); }

/* Pages et tableaux récents */
.hm-pg { padding: 10px; }
.hm-pg .pg-row-titre { font-size: 1.02rem; }

/* Derniers messages */
.hm-msg { display: grid; gap: 2px; padding: 10px 2px; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.hm-msg-tete { display: flex; align-items: baseline; gap: .6em; min-width: 0; }
.hm-msg-tete b { flex: none; font-size: .95rem; }
.hm-msg-tete small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .82rem; }
.hm-msg-txt {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: var(--muted); font-size: .95rem; overflow-wrap: anywhere; transition: color .15s ease;
}
.hm-msg:hover .hm-msg-txt { color: var(--ink); }

/* Schedule : la journée heure par heure ; ce qui n'a pas d'heure en pastilles au-dessus */
.hm-ag-tous { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 0 2px; }
.hm-ag-tout {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 4px 10px 4px 8px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--dot, var(--muted)) 18%, transparent); color: var(--ink); font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
}
.hm-ag-tout span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-ag-tout:hover { background: color-mix(in srgb, var(--dot, var(--muted)) 30%, transparent); }
.hm-ag { position: relative; margin: 14px 0 10px; }
.hm-ag-h { position: absolute; left: 42px; right: 0; border-top: 1px solid var(--rule); }
.hm-ag-h span {
  position: absolute; right: calc(100% + 7px); top: -.62em; color: var(--muted); font-size: .74rem; line-height: 1.2;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hm-ag-evs { position: absolute; inset: 0 0 0 46px; }
.hm-ev {
  position: absolute; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; overflow: hidden;
  padding: 3px 8px; border: 0; border-left: 3px solid var(--dot, var(--muted)); border-radius: 6px;
  background: color-mix(in srgb, var(--dot, var(--muted)) 22%, var(--bg)); color: var(--ink);
  font: inherit; font-size: .84rem; line-height: 1.25; text-align: left; cursor: pointer; transition: background-color .15s ease;
}
.hm-ev:hover { background: color-mix(in srgb, var(--dot, var(--muted)) 36%, var(--bg)); }
.hm-ev b { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--muted); font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hm-ev b .i { width: 11px; height: 11px; }
.hm-ev span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.hm-ev.is-court { flex-direction: row; align-items: center; gap: 6px; padding-block: 0; }
.hm-ev.is-echeance { border-left-style: dotted; }
.hm-ev.is-passe, .hm-ev.is-fait { opacity: .5; }
.hm-ev.is-fait span { text-decoration: line-through; }
.hm-ag-now { position: absolute; z-index: 2; left: 42px; right: 0; border-top: 2px solid var(--accent); pointer-events: none; }
.hm-ag-now::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* Calendar : le mois, des points pour les tâches (rouges si en retard) et les cours */
.hm-cal-tete { display: flex; align-items: center; gap: 4px; margin: 10px 0 6px; }
.hm-cal-nom {
  flex: 1; padding: 4px; border: 0; border-radius: 7px; background: none; color: var(--ink);
  font: inherit; font-weight: 700; text-transform: capitalize; cursor: pointer;
}
.hm-cal-nom:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.hm-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.hm-mj { padding: 2px 0 4px; color: var(--muted); font-size: .72rem; font-weight: 600; text-align: center; text-transform: uppercase; }
.hm-md {
  display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 36px; padding: 5px 0 4px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; font-size: .9rem; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color .15s ease;
}
.hm-md:hover, .hm-md[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.hm-md.is-passe { color: var(--muted); }
.hm-md > span:first-child { display: grid; place-items: center; width: 24px; height: 22px; border-radius: 11px; }
.hm-md.is-auj > span:first-child { background: var(--accent-bg); color: var(--accent-ink); font-weight: 700; }
.hm-md-pts { display: flex; gap: 2px; height: 4px; }
.hm-md-pts i { width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.hm-md.is-passe .hm-md-pts i { background: var(--late); }

/* Grades : moyenne, dernières notes (membre) ou rendus à noter (admin) */
.hm-moy { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 6px; }
.hm-moy span { color: var(--muted); font-weight: 600; }
.hm-moy b { font-family: var(--f-display); font-stretch: 72%; font-size: 2.1rem; line-height: 1; }
.hm-moy small { color: var(--muted); }
.hm-sous { margin: 10px 0 0; color: var(--muted); }
.hm-note {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 2px; border: 0; border-bottom: 1px solid var(--rule);
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.hm-note-quoi { display: grid; flex: 1; min-width: 0; }
.hm-note-quoi > span, .hm-note-quoi small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-note-quoi > span { font-weight: 600; }
.hm-note-quoi small { color: var(--muted); font-size: .82rem; }
.hm-note:hover .hm-note-quoi > span { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.hm-note-n { flex: none; font-variant-numeric: tabular-nums; }
.hm-note-n small { color: var(--muted); font-weight: 400; }
.hm-note > .i { flex: none; width: 14px; height: 14px; color: var(--muted); }


/* Le Google Picker passe au-dessus de tout (panneau d'une tâche, aperçus) */
.picker-dialog-bg { z-index: 2000 !important; }
.picker-dialog { z-index: 2001 !important; }

/* ==========================================================================
   Pages : arborescence (sous-pages sous leur page, repliables)
   ========================================================================== */
/* Arbre classique : flèche, icône, titre ; chaque sous-page est reliée à sa page par un coude
   (├ pour les sous-pages suivies d'une autre, └ pour la dernière) */
.pg-arbre, .pg-enfants { --tr: color-mix(in srgb, var(--ink) 24%, transparent); margin: 0; padding: 0; list-style: none; }
.pg-arbre { margin: 0 -8px; }
.pg-enfants { margin-left: 11px; }
.pg-noeud { position: relative; }
.pg-enfants > .pg-noeud { padding-left: 16px; }
.pg-enfants > .pg-noeud::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; border-left: 1.5px solid var(--tr);
}
.pg-enfants > .pg-noeud::after {
  content: ""; position: absolute; top: 18px; left: 0; width: 14px; border-top: 1.5px solid var(--tr);
}
.pg-enfants > .pg-noeud:last-child::before { bottom: auto; height: 18.75px; width: 14px; border-bottom: 1.5px solid var(--tr); border-bottom-left-radius: 7px; }
.pg-enfants > .pg-noeud:last-child::after { display: none; }
.pg-arbre .pg-row {
  position: relative; display: flex; align-items: center; gap: 0; height: 36px; margin: 0; padding: 0 4px 0 0;
  border: 0; border-radius: 8px;
}
.pg-arbre .pg-row:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.pg-lien { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; height: 100%; padding: 0 6px 0 2px; color: var(--ink); text-decoration: none; }
.pg-arbre .pg-row .i { width: 16px; height: 16px; }
.pg-arbre .pg-row-titre { font-size: 1.04rem; font-weight: 600; }
.pg-enfants .pg-row-titre { font-weight: 500; }
.pg-arbre .pg-row-age { font-size: .82rem; opacity: 0; transition: opacity .12s ease; }
.pg-arbre .pg-row:hover .pg-row-age { opacity: 1; }
.pg-nb {
  display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .4em; border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 10%, transparent); color: var(--muted); font-size: .76rem; font-weight: 700;
}
.pg-tri {
  position: relative; display: grid; place-items: center; flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer; transition: color .15s ease, background-color .15s ease;
}
.pg-row .pg-tri .i { width: 12px; height: 12px; transition: transform .2s var(--ease); }
.pg-tri[aria-expanded="false"] .i { transform: rotate(-90deg); }
.pg-tri:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 9%, transparent); }
.pg-tri.is-vide { pointer-events: none; }
/* Sous-page sans enfants : le trait continue jusqu'à l'icône */
.pg-enfants .pg-tri.is-vide::before { content: ""; position: absolute; top: 50%; left: -3px; right: 3px; border-top: 1.5px solid var(--tr); }
.pg-sous { flex: none; width: 30px; height: 30px; color: var(--muted); opacity: 0; transition: opacity .12s ease; }
.pg-sous .i { width: 14px !important; height: 14px !important; }
.pg-row:hover .pg-sous, .pg-sous:focus-visible { opacity: 1; }
@media (hover: none) { .pg-sous { opacity: .6; } .pg-arbre .pg-row-age { opacity: 1; } }

/* ==========================================================================
   Éditeur : code coloré, images, contenus intégrés
   ========================================================================== */
.code {
  --c-kw: #ff8f70; --c-str: #a8d58a; --c-num: #f4c76b; --c-com: #8d8c86; --c-fn: #7cb8ff;
  --c-type: #c6a8ff; --c-lit: #f4c76b; --c-prop: #79d4c7; --c-pre: #e08fd6;
  width: 100%; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); box-shadow: inset 0 0 0 1px var(--rule);
}
:root[data-theme="clair"] .code {
  --c-kw: #c2410c; --c-str: #3d7a1e; --c-num: #a15c07; --c-com: #85837b; --c-fn: #1d5fbf;
  --c-type: #6d3fc0; --c-lit: #a15c07; --c-prop: #0f766e; --c-pre: #a3307a;
}
.blk[data-type="code"] .blk-body { display: block; }
.blk[data-type="code"] .blk-handle { top: .35em; }
.code-tete { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px 0 8px; }
.code-lang, .code-copier {
  display: inline-flex; align-items: center; gap: .4em; padding: .28em .55em; border: 0; border-radius: 6px;
  background: none; color: var(--muted); font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  transition: color .15s ease, background-color .15s ease, opacity .12s ease;
}
.code-lang .i, .code-copier .i { width: 12px; height: 12px; }
.code-lang:hover:not(:disabled), .code-copier:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.code-lang:disabled { cursor: default; }
.code-copier { opacity: 0; }
.blk:hover .code-copier, .blk:focus-within .code-copier, .is-lecture .code-copier { opacity: 1; }
@media (hover: none) { .code-copier { opacity: 1; } }
.code-zone { display: flex; font-family: var(--f-mono); font-size: .9rem; line-height: 1.6; }
.code-num {
  flex: none; min-width: 2.4em; margin: 0; padding: 6px 10px 14px 12px; font: inherit; white-space: pre;
  text-align: right; color: var(--muted); opacity: .55; user-select: none;
}
.code-defil { position: relative; flex: 1; min-width: 0; overflow-x: auto; }
.code-hl, .blk[data-type="code"] .code-defil .blk-text { margin: 0; padding: 6px 18px 14px 4px; font: inherit; letter-spacing: 0; white-space: pre; tab-size: 4; overflow-wrap: normal; }
.code-hl { position: absolute; top: 0; left: 0; min-width: 100%; color: var(--ink); pointer-events: none; }
.blk[data-type="code"] .code-defil .blk-text {
  position: relative; display: block; width: max-content; min-width: 100%; border-radius: 0; background: none;
  color: transparent; caret-color: var(--ink); overflow: visible;
}
.blk[data-type="code"] .code-defil .blk-text::selection { color: transparent; background: color-mix(in srgb, var(--accent) 32%, transparent); }
.blk[data-type="code"] .code-defil .blk-text:empty::before { color: var(--muted); }
.c-kw { color: var(--c-kw); }
.c-str { color: var(--c-str); }
.c-num { color: var(--c-num); }
.c-com { color: var(--c-com); font-style: italic; }
.c-fn { color: var(--c-fn); }
.c-type { color: var(--c-type); }
.c-lit { color: var(--c-lit); }
.c-prop { color: var(--c-prop); }
.c-pre { color: var(--c-pre); }
.code-langs { max-height: min(60vh, 520px); overflow-y: auto; }

.blk[data-type="image"], .blk[data-type="embed"] { margin: .7em 0; }
.blk[data-type="image"] .blk-body, .blk[data-type="embed"] .blk-body { display: block; }
.blk[data-type="image"]:focus, .blk[data-type="embed"]:focus { box-shadow: none; }
.blk-fig { display: flex; flex-direction: column; align-items: center; margin: 0; }
.blk-fig img { display: block; max-width: 100%; height: auto; border-radius: 10px; cursor: default; transition: box-shadow .15s ease; }
.is-lecture .blk-fig img { cursor: zoom-in; }
.blk-fig[data-taille="m"] img { max-width: 64%; }
.blk-fig[data-taille="s"] img { max-width: 36%; }
.blk:focus .blk-fig img { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.blk-cap { min-width: 40%; max-width: 100%; margin-top: 8px; font-size: .92rem; color: var(--muted); text-align: center; white-space: pre-wrap; outline: none; }
.blk-cap:empty::before { content: attr(data-ph); opacity: .55; }
.blk:not(:hover):not(:focus-within) .blk-cap:empty, .is-lecture .blk-cap:empty { display: none; }
.blk-vide {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: 100%; margin: 0; padding: 14px 16px;
  border: 1.5px dashed var(--rule); border-radius: 12px; color: var(--muted);
}
.blk-vide > .i { width: 18px; height: 18px; flex: none; }
.blk-vide > span { margin-right: 6px; font-weight: 700; color: var(--ink); }
.blk-vide small { font-size: .84rem; }
.blk-vide .btn { color: var(--ink); }
.img-scrim { cursor: zoom-out; }
.img-scrim img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }

.blk-emb { overflow: hidden; border: 1.5px solid var(--rule); border-radius: 12px; }
.blk-emb:has(.blk-vide) { border: 0; overflow: visible; }
.emb-tete { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 6px 4px 14px; }
.emb-tete > .i { width: 16px; height: 16px; flex: none; }
.emb-tete b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emb-tete small { flex: none; color: var(--muted); }
.emb-tete .ibtn { margin-left: auto; color: var(--muted); }
.blk-emb iframe { display: block; width: 100%; height: 560px; border: 0; background: #fff; }
.blk-emb iframe[data-sorte="large"] { height: auto; aspect-ratio: 16 / 9; }
.blk-emb iframe[data-sorte="figma"] { height: auto; aspect-ratio: 16 / 10; }

/* Listes des tableaux et des pages : options (⋯) au survol, ranger en faisant glisser */
.tb-carte { padding: 0; }
.tb-carte-lien {
  display: flex; flex-direction: column; gap: 6px; padding: 10px 10px 12px; border-radius: inherit;
  color: inherit; text-decoration: none; user-select: none; -webkit-user-drag: none;
}
.tb-carte-plus {
  position: absolute; top: 16px; right: 16px; width: 32px; height: 32px;
  background: color-mix(in srgb, var(--tone-neutre) 82%, transparent); opacity: 0; transition: opacity .12s ease, background-color .15s ease;
}
.tb-carte-plus .i { width: 16px; height: 16px; }
.tb-carte-plus:hover { background: var(--tone-neutre); }
.tb-carte:hover .tb-carte-plus, .tb-carte-plus:focus-visible, .tb-carte-plus[aria-expanded="true"] { opacity: 1; }
.tb-carte.is-tri { transition: box-shadow .15s ease; box-shadow: 0 22px 44px -12px rgba(0,0,0,.6); }
.pg-lien { user-select: none; -webkit-user-drag: none; }
.pg-plus { flex: none; width: 30px; height: 30px; color: var(--muted); opacity: 0; transition: opacity .12s ease; }
.pg-plus .i { width: 15px !important; height: 15px !important; }
.pg-row:hover .pg-plus, .pg-plus:focus-visible, .pg-plus[aria-expanded="true"] { opacity: 1; }
.pg-noeud.is-tri { border-radius: 8px; background: var(--bg); box-shadow: 0 12px 28px -10px rgba(0,0,0,.6); }
.pg-noeud.is-tri > .pg-row { background: color-mix(in srgb, var(--ink) 8%, transparent); }
@media (hover: none) { .tb-carte-plus { opacity: 1; } .pg-plus { opacity: .6; } }

/* ---------- History (history.js, #/historique : admins des projets de groupe) ---------- */
.hi-filtres { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; max-width: 920px; margin: 22px 0 6px; }
.hi-qui-choix {
  height: 34px; padding: 0 .6em; border: 1.5px solid var(--rule); border-radius: 9px; outline: none;
  background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); font-weight: 600; font-size: .88rem;
}
.hi-qui-choix:focus { border-color: var(--ink); }
.hi-qui-choix option { background: var(--bg); color: var(--ink); }
.hi-jour { max-width: 920px; margin-top: 26px; }
.hi-jour .grp-title small { margin-left: .4em; }
.hi-liste { display: grid; }
.hi-e { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; border-bottom: 1px solid var(--rule); }
.hi-ligne {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 6px; border: 0; border-radius: 8px;
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease;
}
.hi-ligne:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.hi-av {
  display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: var(--bg); font-family: var(--f-display); font-stretch: 72%; font-weight: 800; font-size: .95rem;
}
.hi-quoi { flex: 1; display: grid; gap: 2px; min-width: 0; }
.hi-phrase { line-height: 1.35; overflow-wrap: anywhere; }
.hi-qui { font-weight: 700; }
.hi-titre { font-weight: 600; }
.hi-quand { color: var(--muted); font-weight: 600; font-size: .85rem; }
.hi-ligne .hi-caret { flex: none; width: 14px; height: 14px; color: var(--muted); transition: transform .18s var(--ease); }
.hi-e.is-ouverte .hi-ligne .hi-caret { transform: rotate(180deg); }
.hi-annuler:disabled { opacity: .4; cursor: default; }
.hi-e.is-annulee .hi-phrase { color: var(--muted); }
.hi-e.is-annulee .hi-av { opacity: .45; }
.hi-tag {
  display: inline-block; margin-right: .5em; padding: 1px 7px; border-radius: 6px; vertical-align: 1px;
  background: color-mix(in srgb, var(--ink) 12%, transparent); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.hi-details { grid-column: 1 / -1; display: grid; gap: 8px; margin: 0 0 14px 48px; padding: 0; list-style: none; font-size: .92rem; }
.hi-ch p { margin: 0; overflow-wrap: anywhere; }
.hi-objet, .hi-ch-type, .hi-plus { color: var(--muted); font-weight: 600; }
.hi-ch-type.is-ajout { color: var(--ok); }
.hi-ch-type.is-suppr { color: var(--late); }
.hi-perdu { color: var(--late); font-weight: 600; }
.hi-champs { display: grid; gap: 2px; margin: 4px 0 0; padding: 0 0 0 14px; list-style: none; color: var(--muted); }
.hi-champ { color: var(--ink); font-weight: 600; }
.hi-avant { text-decoration-thickness: 1px; }
.hi-apres { color: var(--ink); }
.hi-plus-btn { margin-top: 24px; }
@media (max-width: 720px) {
  .hi-details { margin-left: 6px; }
  .hi-ligne { gap: 10px; padding: 10px 2px; }
}
@media (max-width: 480px) {
  .hi-annuler { padding: .5em; }
  .hi-annuler-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hi-ligne .hi-caret { display: none; }
}

/* ==========================================================================
   Assistant (assistant.js, .ia-*) : panneau à droite (classe .panel), sans voile
   ========================================================================== */
.ia { width: min(440px, calc(100vw - 20px)); }
.ia-btn[aria-expanded="true"] { color: var(--accent); }
body:not(.sans-fab) .ia-btn { display: none; } /* ailleurs, l'assistant est le bouton rond */
.ia-bar .panel-ctx .i { width: 14px; height: 14px; }
.ia-fil { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 10px 22px 16px; }
.ia-vide { margin: auto 0; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.ia-vide p { margin: 0 0 14px; }
.ia-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.ia-vide .ia-avis { margin: 18px 0 0; font-size: .76rem; line-height: 1.45; }
.ia-avis a { color: inherit; text-underline-offset: .15em; }
/* Le badge reCAPTCHA (App Check) couvrirait le bouton rond : l'avis du panneau le remplace */
.grecaptcha-badge { visibility: hidden; }
.ia-moi {
  align-self: flex-end; max-width: 85%; margin: 0; padding: 8px 12px; border-radius: 14px 14px 4px 14px;
  background: color-mix(in srgb, var(--accent) 14%, var(--bg)); white-space: pre-wrap; overflow-wrap: anywhere;
}
.ia-rep { max-width: 94%; line-height: 1.55; overflow-wrap: anywhere; animation: fondu .2s ease; }
.ia-rep p { margin: 0 0 .5em; }
.ia-rep p:last-child, .ia-rep ul:last-child { margin-bottom: 0; }
.ia-rep ul { margin: 0 0 .5em; padding-left: 1.2em; }
.ia-info { margin: 0; font-size: .8rem; color: var(--muted); }
.ia-info .ref { color: var(--ink); font-weight: 500; }
/* Éléments liés : sous le message envoyé, puis au-dessus de la saisie (× pour retirer, + élément affiché) */
.ia-moi-pieces { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 85%; margin: -8px 0 0; font-size: .85rem; }
.ia-pieces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 14px 8px; font-size: .85rem; }
.ia-pieces[hidden] { display: none; }
.ia-piece { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; border-radius: 6px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.ia-piece .ref { min-width: 0; background: none; }
.ia-piece-x {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px; margin-right: 2px; padding: 0; border: 0;
  border-radius: 5px; background: none; color: var(--muted); cursor: pointer;
}
.ia-piece-x:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 10%, transparent); }
.ia-piece-x .i { width: 11px; height: 11px; }
.ia-joindre {
  display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; padding: 1px 9px 1px 7px;
  border: 1px dashed var(--rule); border-radius: 6px; background: none; color: var(--muted); font: inherit; cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.ia-joindre span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-joindre:hover { color: var(--ink); border-color: var(--ink); }
.ia-joindre .i { flex: none; width: 11px; height: 11px; }
.ia-err { margin: 0; font-size: .88rem; color: var(--accent); }
.ia-carte { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--rule); animation: fondu .2s ease; }
.ia-carte.is-fait { opacity: .66; }
.ia-carte-t { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.ia-carte-t .i { flex: none; width: 14px; height: 14px; color: var(--muted); }
.ia-carte-r { margin: 0; font-size: .85rem; color: var(--muted); }
.ia-carte-b { display: flex; justify-content: flex-end; gap: 6px; }
.ia-case { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); cursor: pointer; }
.ia-props { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ia-props label { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.ia-props small { margin-left: auto; padding-left: 8px; color: var(--muted); white-space: nowrap; }
.ia-attente { display: flex; gap: 4px; margin: 0; padding: 4px 0; }
.ia-attente i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ia-point 1s ease-in-out infinite; }
.ia-attente i:nth-child(2) { animation-delay: .15s; }
.ia-attente i:nth-child(3) { animation-delay: .3s; }
@keyframes ia-point { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.ia-saisie {
  display: flex; align-items: flex-end; gap: 6px; margin: 0 14px 10px; padding: 4px 4px 4px 14px;
  border-radius: 16px; box-shadow: inset 0 0 0 1px var(--rule); transition: box-shadow .15s ease;
}
.ia-saisie:focus-within { box-shadow: inset 0 0 0 1px var(--ink); }
.ia-champ {
  flex: 1; min-width: 0; max-height: 150px; padding: 7px 0; border: 0; outline: 0; resize: none;
  background: none; color: inherit; font: inherit; line-height: 1.45;
}
.ia-champ:disabled, .ia-envoyer:disabled { opacity: .4; }
.ia-pied { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -2px 20px 12px; font-size: .78rem; color: var(--muted); }
.ia-pied[hidden] { display: none; }
.ia-lien { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.ia-lien:hover { color: var(--ink); }
@media (max-width: 720px) {
  .ia { width: calc(100vw - 12px); }
  .ia-fil { padding: 8px 16px 14px; }
}

/* ==========================================================================
   Agents IA (agents.js, .ag-*) : clés MCP, dans un menu (O.menu, .ag-pop)
   ========================================================================== */
.pop.ag-pop { width: min(440px, calc(100vw - 16px)); max-width: none; }
.ag { display: grid; gap: 10px; padding: 2px 4px 6px; }
.ag .pop-head { margin: 0; }
.ag-aide, .ag-vide { margin: 0; padding: 0 8px; font-size: .85rem; line-height: 1.45; color: var(--muted); }
.ag-liste { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ag-liste li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; }
.ag-liste li:hover { background: color-mix(in srgb, var(--paper-ink) 6%, transparent); }
.ag-id { display: grid; min-width: 0; flex: 1; }
.ag-id b, .ag-id small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-id small { color: var(--muted); font-size: .78rem; }
.ag-form { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 8px; }
.ag-form input { flex: 1 1 100%; min-width: 0; }
.ag-form select { flex: 1; min-width: 0; }
.ag-neuve { display: grid; gap: 8px; margin: 0 8px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--accent); }
.ag-neuve-t { display: flex; gap: 8px; margin: 0; font-size: .85rem; font-weight: 600; }
.ag-neuve-t .i { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--accent); }
.ag-ligne .label { margin: 0 0 3px; }
.ag-code { display: flex; align-items: flex-start; gap: 4px; padding: 6px 6px 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--paper-ink) 7%, transparent); }
.ag-code code { flex: 1; min-width: 0; font-size: .76rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }
.ag-b { display: flex; justify-content: flex-end; }

/* ==========================================================================
   Offres et profil (plans.js, profile.js) : choix hors offre dans Settings, limite du Free,
   fenêtre « Choose a plan », vue #/profile
   ========================================================================== */
/* Settings : un choix hors offre (cadenas, cliquable) et la ligne Plan */
.pr-seg button.is-verrou { color: var(--paper-muted); }
.pr-seg button.is-verrou .i { width: 11px; height: 11px; }
.pr-offre { display: inline-flex; align-items: center; gap: 10px; color: var(--paper-ink); }
/* Membres : le Free est complet */
.mb-limite { display: flex; align-items: center; gap: 8px; margin: 10px 4px 4px; font-size: .86rem; color: var(--paper-muted); }
.mb-limite > .i { flex: none; width: 14px; height: 14px; }
.mb-limite > span { flex: 1; }

/* Choisir une offre (même habit que « Set up the project ») */
.of-periode { margin: -4px 0 14px; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--paper-ink) 25%, transparent); }
.of-periode button { color: var(--paper-ink); }
.of-periode button:hover { background: color-mix(in srgb, var(--paper-ink) 9%, transparent); }
.of-periode button[aria-pressed="true"] { background: var(--paper-ink); color: var(--paper); }
.of-actuel { margin-left: .35em; padding: .05em .55em; border-radius: 999px; box-shadow: inset 0 0 0 1.2px var(--rule); font-style: normal; font-weight: 600; font-size: .72rem; color: var(--paper-muted); vertical-align: .12em; }
.of-total { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; margin-top: 16px; padding-top: 12px; border-top: 1.5px solid var(--paper-ink); }
.of-total > span, .of-total > b { font-family: var(--f-display); font-stretch: 72%; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.of-total > span { font-size: .95rem; }
.of-total > b { font-size: 1.45rem; }
.of-total > small { grid-column: 1 / -1; justify-self: end; font-size: .82rem; color: var(--paper-muted); }
.of > .cf-note { margin-top: 10px; }
.of .cf-pied .btn:disabled { opacity: .35; cursor: default; }

/* ---------- Profil (#/profile, profile.js) ---------- */
.pf-bloc { max-width: 760px; margin-top: 30px; }
.pf-note { margin: 10px 0 2px; font-size: .92rem; color: var(--muted); }
.pf-ligne { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.pf-ligne .mb-av { background: var(--ink); color: var(--bg); }
.pf-id { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.pf-id b, .pf-id small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-id small { font-size: .85rem; color: var(--muted); }
.pf-liste { display: grid; margin-top: 6px; }
.pf-projet { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 3px 12px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.pf-projet .pf-id { grid-column: 1; grid-row: 1; }
.pf-detail { grid-column: 1; grid-row: 2; font-size: .85rem; color: var(--muted); }
.pf-offre {
  grid-column: 2; grid-row: 1 / 3; padding: .3em .75em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--rule);
  font-family: var(--f-display); font-stretch: 72%; font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
}
.pf-offre[data-plan="business"] { background: var(--pan-ciel); box-shadow: none; color: var(--pan-ink); }
.pf-offre[data-plan="education"] { background: var(--pan-lavande); box-shadow: none; color: var(--pan-ink); }
.pf-projet > .btn { grid-column: 3; grid-row: 1 / 3; }
.pf-portail { margin-top: 14px; }
.pf-conso { margin: 12px 0 8px; font-weight: 600; }
.pf-jauge { height: 8px; max-width: 360px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.pf-jauge > i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.pf-liens { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pf-bloc > .btn { margin-top: 12px; }
@media (max-width: 520px) {
  .pf-projet { grid-template-columns: minmax(0, 1fr) auto; }
  .pf-offre { grid-row: 1; }
  .pf-projet > .btn { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 6px; }
}