/* Coque : rail d'icônes, barre latérale, barre du haut */
.shell { display: grid; grid-template-columns: var(--rail-w) var(--side-w) minmax(0, 1fr); min-height: 100vh; }
.rail { position: sticky; top: 0; height: 100vh; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--bg-subtle); border-right: 1px solid var(--border); }
.rail .logo { width: 32px; height: 32px; border-radius: 8px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; text-decoration: none; }
.rail nav { display: grid; gap: 4px; }
.rail nav a { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--text-3); }
.rail nav a:hover { color: var(--text); background: var(--bg-muted); }
.rail nav a[aria-current="page"] { color: var(--text); background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--border); }
.rail svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.side { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 10px 8px 16px; display: flex; flex-direction: column; gap: 2px; background: var(--bg-subtle); border-right: 1px solid var(--border); }
.side .select { width: 100%; font-weight: 600; margin-bottom: 8px; background: var(--bg); }
.side nav { display: grid; gap: 1px; }
.side a, .side .sideaction { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: var(--r-ctl); font-size: 13.5px; text-decoration: none; color: var(--text); }
.side a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side a:hover, .side .sideaction:hover { background: var(--bg-muted); }
.side a[aria-current="page"] { background: var(--bg-muted); font-weight: 500; box-shadow: inset 0 0 0 1px var(--border); }
.side .sideaction { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; height: 32px; padding: 0 8px; border-radius: var(--r-ctl); font-size: 13.5px; color: var(--text-3); width: 100%; }
.side .sideaction:hover { color: var(--text); }
.side .sideaction:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.side h4 { margin: 14px 8px 4px; font-size: 12px; font-weight: 500; color: var(--text-3); }
.side .muted { padding: 0 8px; font-size: 13px; }
.side .emoji { font-style: normal; width: 20px; text-align: center; flex: none; }
.col { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; height: var(--top-h); padding: 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bg); border-bottom: 1px solid var(--border); font-size: 13.5px; }
.topbar .title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .actions { display: flex; align-items: center; gap: 8px; flex: none; }
.page { padding: 28px clamp(16px, 4vw, 56px) 64px; max-width: 1280px; width: 100%; margin: 0 auto; }
.page > .sub, .sub { color: var(--text-2); margin-top: 6px; max-width: 72ch; }
.pagehead { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.daterange { font-size: 13px; font-weight: 500; color: var(--text-2); }
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 18px 0; }

/* Filtres : groupes reliés par OU, conditions reliées par ET */
.filterform { display: grid; gap: 8px; min-width: 280px; }
.filterform .row { flex-wrap: nowrap; }
.filterform .input, .filterform .select { flex: 1; }
.filterform .field { flex: 1; }
.filtergroups { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.filtergroup { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.filtergroup.boxed { padding: 3px; border: 1px solid var(--border); border-radius: var(--r-card); }
.filteritem { display: inline-flex; gap: 6px; align-items: center; min-width: 0; }
.joiner { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--text-3); }
.joiner.or { margin: 0 2px 0 4px; color: var(--text); }
/* Période */
.datepanel { min-width: 320px; }
.presetgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
/* Colonnes du tableau */
.colpicker { min-width: 300px; }
.presets { display: grid; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.presets .menulabel { padding-left: 0; }
.presetrow { display: flex; align-items: center; gap: 2px; }
.presetrow .menuitem { flex: 1; min-width: 0; }
.tabletools { display: flex; align-items: center; gap: 8px; margin: 16px 0 8px; }
.tablenote { margin-top: 12px; }
/* Groupes manuels d'un comparatif */
.manualgroups { display: grid; gap: 8px; margin: 0 0 18px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-board); background: var(--bg-subtle); }
.manualgroup { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-card); }
.manualgroup > .input { width: 200px; font-weight: 500; }
.manualgroup > .filtergroups { flex: 1; }
/* Courbes */
/* Sur petit écran, le tracé garde une largeur lisible et défile horizontalement. */
.linechart .plot { overflow-x: auto; }
.linechart .plotinner { position: relative; min-width: 560px; }
.linechart svg { display: block; width: 100%; height: auto; touch-action: pan-y; }
.linechart .legend span { display: inline-flex; align-items: center; max-width: 220px; color: var(--text-2); }
.linechart .legend span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.charttip { position: absolute; top: 8px; z-index: 5; translate: 12px 0; min-width: 190px; max-width: 280px; padding: 8px 10px; display: grid; gap: 4px; background: var(--bg); border-radius: var(--r-card); box-shadow: var(--shadow-pop); font-size: 12px; pointer-events: none; }
.charttip.left { translate: calc(-100% - 12px) 0; }
.charttip > span { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.charttip i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.charttip .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.charttip b { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
/* Arbre des rapports dans la barre latérale */
.tree { display: grid; gap: 1px; border-radius: var(--r-ctl); padding-bottom: 12px; }
.tree.over { background: var(--bg-muted); }
.treehead { display: flex; align-items: center; justify-content: space-between; margin: 14px 4px 4px 8px; }
.treehead h4 { margin: 0; }
.folderrow { display: flex; align-items: center; border-radius: var(--r-ctl); }
.folderrow:hover, .folderrow.over { background: var(--bg-muted); }
.folderrow.over { box-shadow: inset 0 0 0 1px var(--border-strong); }
.foldertoggle { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 6px; border-radius: var(--r-ctl); font-size: 13.5px; font-weight: 500; }
.foldertoggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foldertoggle svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: rotate .12s ease-out; }
.foldertoggle svg.open { rotate: 90deg; }
.foldertoggle:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.folderkids { display: grid; gap: 1px; margin-left: 12px; padding-left: 6px; border-left: 1px solid var(--border); }
.folderkids > p { padding: 4px 8px; }
.side .sidemore { all: unset; box-sizing: border-box; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--r-ctl); color: var(--text-3); font-size: 15px; line-height: 1; flex: none; }
.side .sidemore:hover { background: var(--border); color: var(--text); }
.side .sidemore:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.side .pop-panel .menuitem { height: auto; }

/* Comparatif : barres groupées */
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: 14px; overflow-x: auto; padding: 36px 6px 6px; }
.bargroup { display: grid; gap: 8px; justify-items: center; min-width: 0; }
.barpair { height: 200px; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 6px; border-bottom: 1px solid var(--border); }
.barpair > div { width: min(32px, 40%); border-radius: 6px 6px 0 0; position: relative; min-height: 2px; }
.bar1 { background: var(--brand); } .bar2 { background: var(--primary); }
.barpair span { position: absolute; bottom: 100%; left: 50%; translate: -50% -3px; font-size: 11px; white-space: nowrap; color: var(--text-3); }
.bar2 span { translate: -50% -16px; }
.collage { display: flex; gap: 2px; }
.collage img { width: 22px; height: 28px; object-fit: cover; border-radius: 3px; }
.barlabel { font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Accueil et leaderboard */
.twocol { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 24px; }
.listcard { border: 1px solid var(--border); border-radius: var(--r-board); overflow: hidden; }
.moverow { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; width: 100%; padding: 8px 14px; border-bottom: 1px solid var(--border); }
.moverow:last-child { border-bottom: 0; }
.moverow:hover { background: var(--bg-subtle); }
.moverow:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
.moverow img { width: 34px; height: 42px; object-fit: cover; border-radius: 5px; }
.podium { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; max-width: 820px; margin-bottom: 16px; }
.bigfig { font-size: 20px; line-height: 28px; font-weight: 600; display: grid; font-variant-numeric: tabular-nums; }
.bigfig small { font-weight: 400; color: var(--text-3); }
.move { font-size: 12px; font-weight: 600; color: var(--text-3); }
.move.up { color: var(--success); } .move.down { color: var(--danger); }
.move.new { background: var(--info-bg); color: var(--info); border-radius: var(--r-pill); padding: 1px 8px; }

/* Veille */
.brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; }
.brandcard { border: 1px solid var(--border); border-radius: var(--r-board); padding: 16px; display: grid; gap: 12px; }
.brandcard header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.facts small, .lbl { font-size: 12px; color: var(--text-3); display: block; }
.facts b { font-size: 16px; font-weight: 600; }
.mix { display: flex; height: 6px; border-radius: 3px; overflow: hidden; gap: 1px; }
.mix span { background: var(--primary); }
.adfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.adfacts b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.brandhead { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; margin: 16px 0; }
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-board); overflow: hidden; }
.panels section { background: var(--bg); padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.donut { position: relative; max-width: 220px; margin: 0 auto 6px; }
.donut svg { display: block; width: 100%; }
.donut div { position: absolute; inset: auto 0 0; text-align: center; display: grid; }
.donut b { font-size: 22px; font-weight: 600; } .donut span { font-size: 12px; color: var(--text-3); }
.legendrow { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 5px 0; border-top: 1px solid var(--border); }
.legendrow i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.legendrow .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar { position: relative; display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 6px 9px; font-size: 13px; }
.hbar .fill { position: absolute; inset: 0 auto 0 0; background: var(--bg-muted); border-radius: var(--r-ctl); }
.hbar .txt, .hbar b { position: relative; }
.hbar .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar b { flex: none; font-weight: 500; }
.inlineform { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-top: 16px; }
.inlineform .grow { flex: 1; min-width: 240px; }

/* Connexions */
.status { display: grid; gap: 12px; max-width: 760px; margin-top: 20px; }
.status section { border: 1px solid var(--border); border-radius: var(--r-board); padding: 16px 18px; display: grid; gap: 8px; }
.status h3 { display: flex; gap: 10px; align-items: center; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.dot.ok { background: var(--success); }

/* Page publique d'instantané */
.public { min-height: 100vh; display: flex; flex-direction: column; }

@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  .rail { position: static; height: auto; flex-direction: row; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--border); }
  .rail nav { grid-auto-flow: column; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--border); padding: 8px 12px; gap: 4px; }
  .side .select { width: auto; margin: 0; }
  .side nav { display: flex; flex-wrap: wrap; }
  .side h4 { display: none; }
  .tree { width: 100%; padding-bottom: 0; }
  .treehead { margin: 0; justify-content: flex-end; }
  .topbar { position: static; padding: 0 16px; height: auto; min-height: var(--top-h); flex-wrap: wrap; padding-block: 8px; }
  .brandhead { grid-template-columns: auto 1fr; }
  th.stick, td.stick { min-width: 200px; max-width: 220px; }
}

/* Écrans de connexion et d'invitation */
.authpage { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--bg-subtle); }
.authcard { width: min(400px, 100%); background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-board); padding: 28px; display: grid; gap: 14px; box-shadow: var(--shadow-sm); }
.authlogo { width: 36px; height: 36px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; }
.authform { display: grid; gap: 12px; max-width: 420px; }
.authform .msg:empty { display: none; }
.usermenu { width: 30px; height: 30px; border-radius: 50%; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.rail .pop-panel { left: 0; min-width: 220px; }
@media (max-width: 900px) { .rail .pop-panel.up { top: calc(100% + 6px); bottom: auto; left: auto; right: 0; } }

/* Navigation par semaine, sprints */
.weeknav { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.weeknav b { font-size: 13.5px; font-weight: 600; min-width: 220px; text-align: center; }
.kpi .small { font-size: 12px; }
.ratebar { display: inline-block; vertical-align: middle; width: 72px; height: 6px; margin-right: 6px; border-radius: 3px; background: var(--bg-muted); overflow: hidden; }
.ratebar i { display: block; height: 100%; background: var(--success); }
.side a .pillnum { margin-left: auto; flex: none; font-size: 12px; }

/* Opportunités */
.oppgroup { margin-top: 8px; }
.oppgroup h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.opplist { display: grid; gap: 10px; margin-top: 12px; }
.opp { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-board); background: var(--bg); }
.opp > img { width: 72px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-ctl); background: var(--bg-muted); }
.oppbody { display: grid; gap: 8px; align-content: start; min-width: 0; }
.oppbody p { color: var(--text-2); max-width: 86ch; }

/* Réglages par client */
.formgrid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; margin-top: 20px; }
.panel { display: grid; gap: 12px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-board); background: var(--bg); min-width: 0; }
.panel h2 { margin: 0; }
.panel h3 { margin-top: 6px; }
.fieldrows { display: grid; gap: 6px; }
.fieldrow { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.valuesrow { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; align-items: start; }
table.preview { width: 100%; border: 1px solid var(--border); border-radius: var(--r-card); border-collapse: separate; border-spacing: 0; overflow: hidden; }
table.preview th, table.preview td { position: static; text-align: left; background: none; height: 36px; }
table.preview th { width: 40%; color: var(--text-2); font-weight: 500; }
.goalrow { gap: 8px; font-size: 13.5px; }
.threecol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.threecol .input { width: 100%; }
.exception { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-card); font-size: 13px; }
.exception .input { flex: 1; min-width: 120px; }
.exception .input.short { flex: none; min-width: 0; }
.rules { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--text-2); }
@media (max-width: 1000px) { .formgrid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .threecol { grid-template-columns: minmax(0, 1fr); } .opp { grid-template-columns: 56px minmax(0, 1fr); } .opp > img { width: 56px; } .weeknav b { min-width: 0; } }

.sub + .tabs, .note + .tabs { margin-top: 16px; }

/* Assistant */
.chat { max-width: 860px; margin: 0 auto; display: grid; gap: 14px; padding-bottom: 12px; }
.chatintro { display: grid; gap: 10px; padding: 24px 0 8px; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.starters .chip { height: auto; min-height: 32px; padding: 6px 12px; text-align: left; white-space: normal; cursor: pointer; }
.thread { display: grid; gap: 18px; }
.msg-user { justify-self: end; max-width: 80%; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background: var(--bg-muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-ai { display: grid; gap: 12px; min-width: 0; }
.md { display: grid; gap: 8px; max-width: 74ch; line-height: 1.55; }
.md h4 { margin: 6px 0 0; font-size: 14px; font-weight: 600; }
.md ul, .md ol { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.md code { padding: 1px 5px; border-radius: 4px; background: var(--bg-muted); font-size: 12.5px; }
.msgtools { display: flex; align-items: center; gap: 2px; }
.working { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; }
.working::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .working::before { animation: none; } }
.chatnote { padding: 8px 12px; border-radius: var(--r-card); background: var(--bg-muted); color: var(--text-2); font-size: 13px; max-width: 74ch; }
.chatnote.error, .chatnote.limit { background: var(--warning-bg); color: var(--text); }
.widget { margin: 0; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-board); background: var(--bg); min-width: 0; }
.widget figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 13.5px; }
.widget .legend i.bar1, .widget .legend i.bar2 { display: inline-block; }
.concepts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.concept { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-card); }
.concept h4 { margin: 0; font-size: 14px; }
.concept .outline { color: var(--text-2); white-space: pre-line; }
.refchip { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 2px; border-radius: var(--r-pill); background: var(--bg-muted); font-size: 12px; max-width: 200px; overflow: hidden; white-space: nowrap; }
.refchip img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.refchip:focus-visible { outline: 2px solid var(--text); }
.composer { position: sticky; bottom: 0; z-index: 10; max-width: 860px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; padding: 12px 0 16px; background: linear-gradient(to top, var(--bg) 80%, transparent); }
.composer textarea { flex: 1; height: auto; min-height: 56px; padding: 10px 12px; resize: vertical; font: inherit; line-height: 1.45; border-radius: var(--r-card); }
.side a small { margin-left: auto; flex: none; font-size: 11.5px; }
table.taxo td.stick { min-width: 220px; }
table.taxo td .tags { flex-wrap: wrap; }

/* Analyses, playbook, suggestions, écritures de l'assistant */
.analysis { margin-top: 20px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-board); display: grid; gap: 12px; }
.analysis h2 { margin: 0; }
.analysis .lead { font-size: 15px; line-height: 1.55; max-width: 80ch; }
.findings { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.finding { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-card); }
.finding p { color: var(--text-2); }
.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; margin: 0; padding: 8px 10px; border-radius: var(--r-ctl); background: var(--bg-subtle); }
.numbers dt { font-size: 11.5px; color: var(--text-3); }
.numbers dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; color: var(--text-2); }
.lesson { display: grid; gap: 8px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-board); }
.lesson p { max-width: 86ch; }
.suggestion { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r-card); background: var(--info-bg); }
.suggestion ol { margin: 0; padding-left: 20px; display: grid; gap: 2px; }
.outcome { display: grid; gap: 4px; justify-items: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-card); background: var(--bg-subtle); max-width: 74ch; }
.input.area { height: auto; padding: 8px 10px; resize: vertical; font: inherit; line-height: 1.45; width: 100%; }
.modal .field input[type="time"] { width: 140px; }

/* Assistant : questions à choix (lot 8) */
.outcome.asks > div { display: grid; gap: 6px; }
.outcome.asks > div + div { margin-top: 10px; }

/* ---------- Tableaux d'inspiration : liste par dossier, page d'un tableau, note et commentaires, import, filtres du flux ---------- */
.boardgroup { margin-top: 8px; }
.boardgrouphead { display: flex; align-items: center; gap: 10px; margin: 24px 0 10px; }
.boardgrouphead h2 { margin: 0; }
.boardgrouphead .pop { margin-left: auto; }
.boardcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.boardcard { position: relative; border: 1px solid var(--border); border-radius: var(--r-board); background: var(--bg); transition: border-color .14s ease-out, box-shadow .14s ease-out; }
.boardcard:hover, .boardcard:focus-within { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.boardlink { display: grid; gap: 6px; padding: 10px 10px 12px; color: inherit; text-decoration: none; border-radius: var(--r-board); }
.boardlink:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.boardcovers { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: var(--bg-muted); }
.boardcovers img { width: 100%; height: 100%; object-fit: cover; display: block; }
.boardemoji { display: grid; place-items: center; font-style: normal; font-size: 32px; }
.boardname { display: flex; align-items: center; gap: 6px; min-width: 0; padding-right: 28px; }
.boardname .emoji { font-style: normal; flex: none; }
.boardname b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boardcard > .pop { position: absolute; right: 6px; bottom: 26px; }
.boardempty { margin-top: 16px; }

.boardtools { align-items: flex-start; }
.uploadctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.uploadprogress { display: inline-flex; align-items: center; gap: 8px; }
.uploadprogress progress { width: 140px; height: 8px; accent-color: var(--brand); }
.uploadhint { flex-basis: 100%; }

.itemcard .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.itemnote { font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }
.itemcard .btn { white-space: normal; height: auto; min-height: 28px; text-align: left; }

.itempanel { display: grid; gap: 14px; align-content: start; }
.itempanelhead { flex-wrap: nowrap; align-items: flex-start; }
.itempanelhead .drawer-title { min-width: 0; overflow-wrap: anywhere; }
.itempreview { display: grid; place-items: center; background: var(--bg-muted); border-radius: var(--r-card); overflow: hidden; }
.itempreview img, .itempreview video { display: block; max-width: 100%; max-height: min(60vh, 560px); width: auto; height: auto; object-fit: contain; }
.itempreview video { width: 100%; background: #000; }
.itembody { color: var(--text-2); white-space: pre-line; overflow-wrap: anywhere; max-width: 74ch; }
.notefield, .commentform { display: grid; gap: 8px; }
.comments h2 { margin: 8px 0 10px; }
.commentlist { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.commentlist li { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-card); }
.commentlist p { white-space: pre-line; overflow-wrap: anywhere; }
.commenthead { display: flex; align-items: center; gap: 8px; }
.commenthead .iconbtn { margin-left: auto; }

.filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.searchfield { flex: 1 1 240px; min-width: 0; max-width: 420px; }
.searchfield .input { width: 100%; }

@media (max-width: 640px) {
  .boardcards { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .searchfield { flex-basis: 100%; max-width: none; }
  .uploadprogress progress { width: 100px; }
}

/* Fiche créa : analyse vidéo (lot 8) */
.videoframes { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; margin: 8px 0 12px; }
.videoframes figure { margin: 0; }
.videoframes img { width: 100%; height: auto; border-radius: var(--r-card); border: 1px solid var(--border); background: var(--bg); }
.spokenhook { margin: 4px 0 12px; padding: 8px 12px; background: var(--bg-muted); border-radius: var(--r-card); color: var(--text); font-style: italic; }
.transcript summary { cursor: pointer; font-weight: 500; }
.transcript p { white-space: pre-wrap; color: var(--text-2); margin-top: 8px; }
@media (max-width: 560px) { .videoframes { grid-template-columns: 1fr; } }
.brandtags { display: grid; gap: 6px; margin-top: 12px; padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--r-board); background: var(--bg); }
.brandtagshead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Vignettes séparées (analyse vidéo sous Cloudflare) */
.framegrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.framegrid img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-muted); }