/* ==========================================================================
   Meeple Manager v2 — Ludothèque, photothèque, import, calendrier, contenus,
   réglages. Mêmes tokens que style.css (mode sombre inclus).
   ========================================================================== */
.app-footer { text-align: center; font-size: 12px; color: var(--encre-2); padding: 18px 16px 6px; }
.app-footer a { color: inherit; }
.notice {
  background: color-mix(in srgb, var(--sable) 25%, var(--carte)); border: 1px solid var(--sable);
  border-radius: 10px; padding: 10px 12px; font-size: 14px; margin: 8px 0;
}
.notice ol { margin: 6px 0 0 18px; padding: 0; }
.check { display: flex !important; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--terracotta); margin: 0; }
.btn-big { padding: 15px 18px; font-size: 16.5px; font-weight: 700; }
.row-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.row-2 label, .ludo-fgrid label, .slide-form label {
  display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--encre-2); margin: 8px 0 0;
}
.row-2 input, .row-2 select, .ludo-fgrid input, .ludo-fgrid select, .slide-form input, .slide-form select, .slide-form textarea,
.card > textarea, .card select, .profile input, .profile textarea {
  width: 100%; padding: 10px 11px; border: 1.5px solid var(--bord); border-radius: 10px;
  background: var(--carte); color: var(--encre); font-size: 15px; font-family: inherit;
}
.card > textarea { margin: 6px 0; resize: vertical; }
.progress { height: 12px; border-radius: 8px; background: var(--bord); overflow: hidden; margin: 10px 0 4px; }
.progress span { display: block; height: 100%; background: var(--terracotta); transition: width .4s; }
.copyline { display: flex; gap: 8px; align-items: center; background: var(--creme); border: 1px solid var(--bord); border-radius: 10px; padding: 8px 10px; }
.copyline code { flex: 1; overflow-wrap: anywhere; font-size: 13.5px; }

/* ---------- Ludothèque ---------- */
.ludo-head { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.ludo-head .search { flex: 1; margin: 0; min-width: 0; }
.ludo-head select { width: auto; }
.ludo-filterbox { padding-bottom: 12px; }
.ludo-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px 10px; margin-bottom: 10px; }
.ludo-rows { padding: 4px 12px; }
.ludo-tags { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.gp-thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--bord); }
.gp-list { max-height: 360px; overflow-y: auto; }
.gp-item.dragover { outline: 2px dashed var(--terracotta); background: color-mix(in srgb, var(--terracotta) 10%, var(--carte)); }
.game-card .sub .badge { margin-right: 3px; }
.bar-row { display: grid; grid-template-columns: minmax(90px, 38%) 1fr 34px; gap: 8px; align-items: center; margin: 5px 0; font-size: 13.5px; }
.bar-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar { height: 10px; background: var(--bord); border-radius: 6px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--terracotta); }
.bar-n { text-align: right; font-weight: 700; }
.game-head { display: flex; gap: 14px; align-items: flex-start; }
.game-head .grow { flex: 1; min-width: 0; }
.game-head .title { font-size: 21px; font-weight: 800; line-height: 1.2; }
.game-head .sub { color: var(--encre-2); font-size: 14px; margin-top: 2px; }
.game-cover { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: var(--bord); }
.game-cover.empty { display: flex; align-items: center; justify-content: center; font-size: 40px; }
.facts { display: grid; grid-template-columns: 130px 1fr; gap: 6px 10px; margin: 0; font-size: 14.5px; }
.facts dt { color: var(--encre-2); font-weight: 600; }
.facts dd { margin: 0; }
.src { font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 1px 5px; margin-left: 4px; vertical-align: 1px; background: var(--bord); color: var(--encre-2); }
.src-claude { background: color-mix(in srgb, var(--violet) 30%, var(--carte)); }
.src-bgg { background: color-mix(in srgb, var(--bleu) 30%, var(--carte)); }
.src-myludo { background: color-mix(in srgb, var(--vert) 30%, var(--carte)); }
@media (max-width: 520px) {
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: 8px; }
  .game-cover { width: 76px; height: 76px; }
}

/* ---------- Photothèque ---------- */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.photo-tile { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: var(--bord); cursor: pointer; }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-tile.selected { outline: 3px solid var(--terracotta); outline-offset: -3px; }
.vid-badge { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 600; }
.photo-meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.ph-check {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(0, 0, 0, .35); color: #fff; font-weight: 800; cursor: pointer;
}
.photo-tile.selected .ph-check { background: var(--terracotta); }
.inbox-layout { display: grid; grid-template-columns: 1fr; gap: 0 14px; }
.inbox-side { display: none; }
@media (min-width: 900px) {
  .inbox-layout { grid-template-columns: 1fr 320px; align-items: start; }
  .inbox-side { display: block; position: sticky; top: 70px; }
}
.selbar {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); z-index: 60;
  display: flex; gap: 8px; align-items: center; background: var(--encre); color: var(--creme);
  border-radius: 14px; padding: 10px 12px; box-shadow: var(--ombre);
}
.selbar span { flex: 1; font-weight: 700; }
@media (min-width: 900px) { .selbar { left: 260px; bottom: 16px; } }
.focal-wrap { position: relative; }
.focal-wrap img { width: 100%; border-radius: 10px; display: block; cursor: crosshair; }
.focal-dot {
  position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 3px solid #fff; box-shadow: 0 0 0 2px var(--terracotta), 0 2px 8px rgba(0, 0, 0, .5); pointer-events: none;
}
.inbox-cta { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.inbox-cta .title { flex: 1; }

/* ---------- Import MyLudo ---------- */
.imp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--bord); }
.imp-row.done { opacity: .6; }
.imp-row .title { font-weight: 700; }
.imp-row .sub { font-size: 13px; color: var(--encre-2); }
.imp-cands { display: flex; flex-direction: column; gap: 4px; }
.imp-cand { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 5px 8px; border: 1px solid var(--bord); border-radius: 8px; cursor: pointer; }
.imp-cand.on { border-color: var(--vert); background: color-mix(in srgb, var(--vert) 12%, var(--carte)); }
.imp-cand input { margin: 0; accent-color: var(--vert); }
@media (max-width: 640px) { .imp-row { grid-template-columns: 1fr; } }

/* ---------- Calendrier v2 ---------- */
.cal-post {
  display: flex; flex-direction: column; gap: 1px; margin-top: 4px; padding: 4px 6px 4px 8px; border-radius: 8px; cursor: grab;
  background: color-mix(in srgb, var(--fmt) 18%, var(--carte)); border-left: 4px solid var(--fmt); font-size: 12px; line-height: 1.25;
}
.cal-post.is-done { opacity: .6; }
.cal-post.is-late { outline: 1.5px solid var(--rouge); }
.cal-fmt { font-weight: 800; font-size: 10.5px; text-transform: uppercase; letter-spacing: .3px; }
.cal-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-badges { font-size: 11px; }
.cal-cell.dragover { outline: 2px dashed var(--terracotta); }
.cal-out { opacity: .45; }
.cal-closed { background: repeating-linear-gradient(135deg, transparent 0 8px, color-mix(in srgb, var(--encre-2) 10%, transparent) 8px 16px); }
.cal-pick {
  margin-top: 6px; width: 100%; border: 1.5px dashed var(--bord); background: none; border-radius: 8px;
  padding: 5px; font-size: 12px; color: var(--encre-2); cursor: pointer; font-family: inherit;
}
.cal-pick:hover { border-color: var(--terracotta); color: var(--terracotta-dark); }
.cal-add {
  margin-top: 4px; width: 100%; border: 0; background: none; border-radius: 8px; padding: 2px 4px; font: inherit;
  font-size: 12px; color: var(--encre-2); cursor: pointer; opacity: .55; text-align: left;
}
.cal-add:hover, .cal-add:focus-visible { opacity: 1; background: var(--sable); color: var(--terracotta-dark); }
.cal-heure { font-size: 11px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-week .cal-cell { min-height: 150px; }
@media (max-width: 800px) {
  .cal-week { grid-template-columns: 1fr; }
  .cal-week .cal-cell { min-height: 0; }
  .cal-week .cal-post { font-size: 13.5px; }
  .cal-week .cal-t { white-space: normal; }
}
.cal-unplanned { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }

/* ---------- Contenus ---------- */
.slides { display: flex; flex-direction: column; gap: 14px; }
.slide-ed { display: grid; grid-template-columns: 180px 1fr; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--bord); }
.slide-prev img { width: 100%; border-radius: 8px; border: 1px solid var(--bord); display: block; cursor: zoom-in; }
.ready-strip img { cursor: zoom-in; }
.scap-main { margin: 10px 0 4px; font-size: 13px; }
.slide-form textarea[data-scap] { min-height: 64px; font-size: 14px; }

/* Visionneuse plein écran (zoom sur une slide ou une photo) */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(18, 16, 24, .92); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lb-close, .lb-nav { position: absolute; border: none; background: rgba(255,255,255,.14); color: #fff; border-radius: 999px; cursor: pointer; font: inherit; }
.lb-close { top: 14px; right: 14px; width: 42px; height: 42px; font-size: 18px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 28px; line-height: 1; }
.lb-prev { left: 12px; } .lb-next { right: 12px; }
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.28); }
.lb-count { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 13px; opacity: .8; }
.slide-empty {
  aspect-ratio: 4 / 5; border: 1.5px dashed var(--bord); border-radius: 8px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; font-weight: 700; font-size: 13px;
}
.slide-top { display: flex; justify-content: space-between; align-items: center; }
@media (max-width: 560px) {
  .slide-ed { grid-template-columns: 1fr; }
  .slide-prev { max-width: 240px; }
}
.ready-strip { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 10px; margin-bottom: 8px; }
.ready-strip img { height: 300px; border-radius: 10px; scroll-snap-align: start; border: 1px solid var(--bord); }
.ready-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }

/* ---------- Suggestion du jour ---------- */
.sugg { border: 2px solid var(--terracotta); background: color-mix(in srgb, var(--terracotta) 7%, var(--carte)); }
.sugg.is-junior { border-color: #78c0f0; background: color-mix(in srgb, #78c0f0 10%, var(--carte)); }
.sugg-k { font-size: 13px; font-weight: 800; color: var(--terracotta-dark); text-transform: uppercase; letter-spacing: .5px; display: flex; justify-content: space-between; }
.sugg-t { font-size: 20px; font-weight: 800; margin: 4px 0; }
.sugg-actions { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin-top: 12px; }
.sugg-actions .btn { padding: 12px 8px; }

/* ---------- Réglages v2 ---------- */
.daychecks { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.profile { border: 1px solid var(--bord); border-radius: 10px; padding: 8px 12px; margin: 8px 0; }
.profile summary { cursor: pointer; }
.profile label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--encre-2); margin: 8px 0 0; }
.audit { max-height: 420px; overflow-y: auto; font-size: 13px; }
.audit-row { padding: 6px 0; border-bottom: 1px solid var(--bord); }
.audit-row.ko { color: var(--rouge); }
.audit-row .when { color: var(--encre-2); font-size: 12px; }
.audit-row .params { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: var(--encre-2); overflow-wrap: anywhere; }

/* Note façon BGG et complexité */
.rstars { color: #A63D2A; letter-spacing: 1px; }
.dots { color: var(--encre); letter-spacing: 2px; font-size: 12px; }

/* --- Éditeur de contenu (§8.5) ------------------------------------------------------ */
.ed-head { display: flex; align-items: center; gap: 12px; }
.ed-head .title { font-weight: 800; font-size: 17px; }
.ed-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.ed-tab { flex: none; border: 1px solid var(--bord); background: var(--carte); color: var(--encre); border-radius: 999px;
  padding: 7px 13px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ed-tab.on { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.ed-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ed-preview { order: -1; position: sticky; top: 0; z-index: 2; padding: 10px; }
@media (min-width: 900px) {
  .ed-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: start; }
  .ed-preview { order: 2; top: 12px; }
}
@media (max-width: 899px) {
  /* Mobile : aperçu au-dessus des champs, compact, sans rester collé en haut */
  .ed-preview { position: static; }
  .ed-frame-wrap { max-width: 210px; margin: 0 auto; }
}
.ed-frame-wrap { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 10px; background: var(--creme); }
.ed-frame-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ed-frame-wrap iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.ed-mode { font-size: 12px; margin: 6px 0 0; }
.ed-zone { margin-bottom: 14px; }
.ed-zone-h { display: flex; align-items: center; gap: 8px; }
.ed-zone-h label { flex: 1; margin: 0; }
.ed-count { font-size: 12px; color: var(--encre-2); font-variant-numeric: tabular-nums; }
.ed-count.warn { color: var(--rouge); font-weight: 700; }
.ed-over { color: var(--rouge); font-size: 13px; font-weight: 600; margin-top: 4px; }
.ed-adv textarea { font-family: monospace; font-size: 12px; }
.ed-ver { border-top: 1px solid var(--bord); padding: 10px 0; }
.ed-ver-txt, .rv-diff { white-space: pre-wrap; font-size: 14.5px; line-height: 1.45; margin: 6px 0; }
del { background: rgba(217, 79, 61, .15); color: var(--rouge); text-decoration: line-through; }
ins { background: rgba(129, 178, 154, .25); text-decoration: none; }
.lt-box { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--creme); font-size: 14px; }
.lt-text { white-space: pre-wrap; margin-bottom: 6px; }
mark.lt-err { background: none; color: inherit; text-decoration: underline wavy var(--rouge); text-underline-offset: 3px; }
.lt-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; }
.lt-found { text-decoration: line-through; color: var(--rouge); }
.rv-item { border-top: 1px solid var(--bord); padding: 10px 0; }
.ig-mock { max-width: 380px; margin: 0 auto; font-size: 13.5px; }
.ig-mock img { width: 100%; border-radius: 6px; display: block; }
.ig-cap { margin-top: 8px; white-space: normal; line-height: 1.4; max-height: 60vh; overflow: auto; }
.logo-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.logo-box img { max-height: 70px; max-width: 220px; background: repeating-conic-gradient(#eee 0 25%, #fff 0 50%) 0 0 / 14px 14px; border-radius: 6px; padding: 4px; }
/* Extraction du logo-titre : la photo tient entière dans la fenêtre, le dehors du cadre est assombri */
.crop-stage { display: flex; justify-content: center; background: var(--creme); border-radius: 10px; padding: 8px; }
.crop-wrap { position: relative; display: inline-block; line-height: 0; user-select: none; -webkit-user-select: none; touch-action: none; overflow: hidden; border-radius: 6px; cursor: crosshair; }
.crop-wrap img { display: block; max-width: 100%; max-height: min(52dvh, 480px); width: auto; height: auto; -webkit-user-drag: none; pointer-events: none; }
.crop-rect { position: absolute; border: 2px solid #fff; outline: 1px dashed var(--terracotta); box-shadow: 0 0 0 9999px rgba(20, 18, 28, .5); cursor: move; }
.crop-h { position: absolute; width: 26px; height: 26px; margin: -13px; }
.crop-h::after { content: ''; position: absolute; inset: 7px; background: #fff; border: 2px solid var(--terracotta); border-radius: 3px; }
.crop-h.nw { left: 0; top: 0; cursor: nwse-resize; } .crop-h.se { right: 0; bottom: 0; cursor: nwse-resize; }
.crop-h.ne { right: 0; top: 0; cursor: nesw-resize; } .crop-h.sw { left: 0; bottom: 0; cursor: nesw-resize; }
.crop-preview { display: block; border-radius: 8px; background-repeat: no-repeat; border: 1px solid var(--bord);
  background-color: var(--creme); margin: 0 auto; }

/* --- À faire par toi ---------------------------------------------------------------- */
.todo { border-top: 1px solid var(--bord); padding: 10px 0; }
.todo-card h2 + .todo, .todo-card p + .todo { border-top: 0; }
.todo-h { display: flex; align-items: flex-start; gap: 8px; }
.todo-h .title { font-weight: 700; }
.todo-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.todo-a input[type=date], .todo-a input[type=text] { width: auto; margin: 0; }
.todo-a textarea { width: 100%; margin: 0; }
.todo-notes { display: flex; flex-wrap: wrap; gap: 4px; }
.todo-notes .btn { min-width: 36px; }
.todo-card { border-left: 4px solid var(--sable); }

/* --- Fiche jeu : photos avec rôle + ordre --------------------------------------- */
.gph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 10px; }
.gph { border: 1px solid var(--bord); border-radius: 12px; overflow: hidden; background: var(--creme); }
.gph.dragging { opacity: .45; }
.gph.dragover { outline: 2px dashed var(--terracotta); outline-offset: 2px; }
.gph-img { position: relative; aspect-ratio: 4 / 3; cursor: pointer; background: var(--bord); }
.gph-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gph-n { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 12px; font-weight: 700;
  border-radius: 10px; padding: 1px 7px; }
.gph-used { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 11.5px; border-radius: 10px; padding: 1px 6px; }
.gph-roles { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; }
.gph-roles button { border: 1px solid var(--bord); background: var(--carte); color: var(--encre-2); border-radius: 8px;
  font-size: 11.5px; padding: 3px 6px; cursor: pointer; font-family: inherit; }
.gph-roles button.on { background: var(--terracotta); border-color: var(--terracotta); color: #fff; font-weight: 700; }
.gph-move { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 0 6px 6px; font-size: 12px; }
.gph-move button { border: none; background: var(--bord); color: var(--encre); border-radius: 8px; width: 30px; height: 26px; cursor: pointer; font-size: 16px; }
.gph-move button:disabled { opacity: .3; cursor: default; }
@media (hover: hover) { .gph { cursor: grab; } }

/* --- Comment jouer (aperçu dans la fiche) ---------------------------------------- */
.howto { background: var(--creme); border: 1px solid var(--bord); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.ht-resume { font-weight: 700; font-size: 15.5px; margin: 0 0 8px; }
.ht-sec h3 { font-size: 14px; margin: 10px 0 4px; color: var(--terracotta-dark); }
.ht-sec p { margin: 0 0 4px; }
.ht-steps, .ht-sec ul { margin: 0; padding-left: 22px; }
.ht-steps li, .ht-sec ul li { margin: 2px 0; }
.ht-tips { border-top: 1px dashed var(--bord); margin-top: 10px; }

/* --- Parties ----------------------------------------------------------------------- */
.pl-row { display: grid; grid-template-columns: 1fr 84px auto auto; gap: 6px; align-items: center; margin-bottom: 6px; }
.pl-row input { margin: 0; }
.pl-win { display: flex; align-items: center; gap: 3px; font-size: 16px; cursor: pointer; white-space: nowrap; }
.pl-win input { width: auto; margin: 0; }

/* --- Rangement --------------------------------------------------------------------- */
.storage-unit { padding: 6px 0; border-top: 1px solid var(--bord); }
.storage-unit:first-of-type { border-top: none; }
.storage-unit .title { font-weight: 600; margin-bottom: 4px; }

/* --- Fiche jeu : en-tête visuel + « où est la boîte » ----------------------------- */
.gm-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 10px; }
@media (max-width: 860px) { .gm-hero-grid { grid-template-columns: 1fr; } }
.gm-id { display: flex; gap: 16px; align-items: flex-start; }
.gm-cover { width: 170px; max-height: 230px; object-fit: contain; border-radius: 8px; flex: none; background: var(--bord);
  box-shadow: 0 8px 18px rgba(58,36,21,.25); cursor: pointer; transform: rotate(-1.5deg); }
.gm-cover.empty { height: 170px; display: flex; align-items: center; justify-content: center; font-size: 56px; }
@media (max-width: 520px) { .gm-cover { width: 112px; } .gm-cover.empty { height: 112px; } }
.gm-id-txt { flex: 1; min-width: 0; }
.gm-id-txt .sub { color: var(--encre-2); font-size: 14px; margin-top: 2px; }
.gm-title { font-size: 25px; font-weight: 800; line-height: 1.15; }
.gm-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gm-fact { display: inline-flex; gap: 6px; align-items: center; background: var(--creme); border: 1px solid var(--bord); border-radius: 999px;
  padding: 4px 11px; font-size: 13.5px; font-weight: 600; }
.gm-where { background: var(--creme); border: 1px solid var(--bord); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.gm-where-h { display: flex; align-items: center; justify-content: space-between; }
.gm-where-empty { text-align: center; }
.gm-where-empty p { margin: 4px 0 10px; }
.gm-where-ico { font-size: 34px; }
.gm-path { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 10px; font-weight: 700; }
.gm-path span { background: var(--carte); border: 1px solid var(--bord); border-radius: 8px; padding: 3px 9px; font-size: 14px; }
.gm-path span.here { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.gm-path b { color: var(--encre-2); }
.gm-where-body { display: flex; gap: 12px; align-items: flex-end; }
.gm-unit { flex: none; width: 74px; border: 3px solid #9b7653; border-radius: 4px; background: #c9a57a; padding: 3px; display: flex; flex-direction: column; gap: 3px; }
.gm-unit div { background: #f3e6d2; font-size: 10px; line-height: 1.2; padding: 3px 4px; border-radius: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6b5640; }
.gm-unit div.on { background: var(--terracotta); color: #fff; font-weight: 800; }
.gm-where-shelf { flex: 1; min-width: 0; }

/* --- Bibliothèque virtuelle ----------------------------------------------------------- */
.vshelf { min-width: 0; }
.vshelf-row { display: flex; align-items: flex-end; gap: 3px; overflow-x: auto; padding: 8px 4px 0; scrollbar-width: thin; }
.vshelf-plank { height: 12px; border-radius: 2px; background: linear-gradient(#c9a57a, #9b7653); box-shadow: 0 4px 6px rgba(58,36,21,.25); }
.vbox { position: relative; flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 2px;
  background: #e9ddc9; box-shadow: 1px -1px 0 rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.2); text-decoration: none; transition: transform .12s; }
.vbox img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vbox span { font-size: 10px; line-height: 1.1; color: #5a4632; padding: 3px; text-align: center; overflow: hidden; }
.vbox.nodim { outline: 1.5px dashed #9b7653; outline-offset: -1.5px; opacity: .85; }
.vbox:hover { transform: translateY(-4px); }
.vbox.here { outline: 3px solid var(--terracotta); outline-offset: 1px; z-index: 1; }
.vbox-pin { position: absolute; top: 2px; right: 2px; font-style: normal; font-size: 14px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); }
.vshelf-more { flex: none; align-self: center; font-weight: 700; color: var(--encre-2); padding: 0 6px; }
.vroom { margin: 18px 4px 8px; font-size: 18px; display: flex; gap: 8px; align-items: center; }
.vroom .count { background: var(--terracotta); color: #fff; border-radius: 12px; padding: 1px 9px; font-size: 13px; }
.vcase { background: linear-gradient(var(--carte), var(--creme)); }
.vcase-shelf { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: end; margin: 6px 0 14px; }
.vcase-lbl { border: none; background: none; text-align: left; cursor: pointer; padding: 0 0 14px; font-family: inherit; color: var(--encre); }
.vcase-lbl strong { display: block; font-size: 13.5px; }
.vcase-lbl span { font-size: 11.5px; color: var(--encre-2); }
@media (max-width: 520px) { .vcase-shelf { grid-template-columns: 1fr; gap: 2px; } .vcase-lbl { padding: 0; } }

/* Meubles de rangement : plan de la pièce (vu du dessus) et meuble vu de face */
.room-plan { display: block; width: 100%; max-width: 400px; height: auto; margin: 0 auto; font-family: inherit; }
.rp-room { fill: var(--creme); stroke: var(--encre-2); stroke-width: 3; }
.rp-wall { font-size: 11px; fill: var(--encre-2); font-weight: 600; }
.rp-unit { cursor: pointer; outline: none; }
.rp-unit rect { fill: #e8d3b4; stroke: #9b7653; stroke-width: 1.5; transition: fill .15s; }
.rp-unit.etagere rect { fill: #f3ead9; }
.rp-unit text { font-size: 10px; font-weight: 700; fill: #5a4632; pointer-events: none; }
.rp-unit .rp-n { font-weight: 500; }
.rp-unit:hover rect, .rp-unit:focus-visible rect { fill: #f2c4b5; }
.rp-unit.on rect { fill: var(--terracotta); stroke: var(--terracotta-dark); }
.rp-unit.on text { fill: #fff; }

.unit-wrap { overflow-x: auto; padding: 4px 0; }
.unit { --cell: 76px; display: inline-flex; flex-direction: column; gap: 4px; }
.unit-body { display: grid; grid-template-columns: repeat(var(--cols), var(--cell)); gap: 4px; padding: 5px;
  background: #c9a57a; border: 3px solid #9b7653; border-radius: 4px; }
.unit.etagere .unit-body { grid-template-columns: calc(var(--cell) * var(--ratio)); }
.ucell { position: relative; height: var(--cell); border: none; border-radius: 3px; background: #f3e6d2; cursor: pointer; padding: 3px;
  display: flex; flex-wrap: wrap; align-content: flex-end; gap: 2px; overflow: hidden; font-family: inherit; color: #6b5640; }
.unit.etagere .ucell { height: calc(var(--cell) * .8); }
.ucell img, .ucell i { width: 22px; height: 30px; object-fit: cover; border-radius: 2px; font-size: 9px; font-style: normal;
  background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(58,36,21,.3); }
.ucell em { font-style: normal; font-size: 11px; font-weight: 700; align-self: center; }
.ucell-plus { margin: auto; font-size: 18px; opacity: .35; }
.ucell:hover { background: #fbe4da; }
.ucell.on { outline: 3px solid var(--terracotta); outline-offset: 1px; background: #fbe4da; z-index: 1; }
.ucell.top { height: 30px; width: 100%; background: transparent; border: 2px dashed #c9a57a; align-content: center; }
.ucell.top::before { content: 'Haut'; font-size: 11px; font-weight: 700; margin-right: 4px; align-self: center; }
.ucell.top img, .ucell.top i { height: 22px; width: 18px; }
.unit.mini { --cell: 26px; }
.unit.mini .ucell { padding: 0; align-content: center; justify-content: center; font-size: 11px; }
.unit.mini .ucell b { color: #6b5640; }
.unit.mini .ucell.on b { color: #fff; }
.unit.mini .ucell.on { background: var(--terracotta); }
.unit.mini .ucell.top { height: 18px; }
.unit.mini .ucell.top::before { font-size: 9px; }
.unit.mini .unit-body { gap: 2px; padding: 3px; border-width: 2px; }
.st-pick { margin: 4px 0 10px; overflow-x: auto; }
.st-pick .unit.mini { --cell: 38px; }
.gm-unitgrid { flex: none; }

.cell-panel { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bord); }
.cell-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cell-list li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cell-list li img { width: 28px; height: 28px; object-fit: cover; border-radius: 4px; flex: none; }
.cell-list li a, .cell-list li > span:not(.muted) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-list li .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-list li .btn { margin-left: auto; flex: none; }
@media (max-width: 520px) { .unit { --cell: 58px; } .ucell img, .ucell i { width: 16px; height: 22px; } }

/* Fiche jeu : en-tête (couverture + infos à gauche, titre, notes, auteurs) ; pastilles cliquables → ludothèque filtrée */
.gm-id { display: grid; grid-template-columns: 170px minmax(0, 1fr); grid-template-areas: "cover txt" "aside aside"; gap: 14px 20px; align-items: start; }
.gm-cover-wrap { grid-area: cover; }
.gm-id-txt { grid-area: txt; }
/* Mécaniques | Catégories | infos d'achat, sur toute la largeur sous la couverture et le titre */
.gm-aside { grid-area: aside; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(150px, auto); gap: 12px 24px;
  padding-top: 14px; border-top: 1px solid var(--bord); }
.gm-id h4 { margin: 0 0 5px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--encre-2); }
.gm-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.gm-link { display: inline-flex; align-items: baseline; gap: 5px; border: none; border-radius: 7px; padding: 3px 9px; cursor: pointer;
  background: color-mix(in srgb, var(--terracotta) 9%, var(--carte)); color: var(--encre); font: inherit; font-size: 13px; line-height: 1.45; transition: background .15s; }
.gm-link span { font-size: 11px; font-weight: 700; color: var(--encre-2); }
.gm-link:hover { background: color-mix(in srgb, var(--terracotta) 22%, var(--carte)); }
.gm-more { border: none; background: none; padding: 0; font: inherit; color: var(--terracotta-dark); cursor: pointer; }
.gm-more:hover { text-decoration: underline; }
.gm-scores { display: flex; margin: 12px 0 2px; }
.gm-score { display: flex; flex-direction: column; padding: 0 16px; border-left: 1px solid var(--bord); }
.gm-score:first-child { padding-left: 0; border-left: none; }
.gm-score strong { font-size: 22px; font-weight: 800; line-height: 1.1; color: var(--encre); }
.gm-score strong small { font-size: 12px; font-weight: 600; color: var(--encre-2); margin-left: 1px; }
.gm-score span { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--encre-2); }
.gm-score.off strong { color: var(--encre-2); opacity: .55; }
.gm-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gm-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 20px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bord); }
.gm-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; margin: 0; font-size: 13px; }
.gm-kv dt { color: var(--encre-2); font-weight: 600; }
.gm-kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .gm-id { grid-template-columns: 112px minmax(0, 1fr); gap: 12px 14px; }
  .gm-aside { grid-template-columns: 1fr; }
  .gm-scores { flex-wrap: wrap; row-gap: 8px; }
  .gm-score { padding: 0 10px; }
  .gm-score strong { font-size: 18px; }
}

/* --- Éditeur de contenu : validation slide par slide et récap (public/js/views/editor.js) --- */
#view:has(.ed-head) { max-width: 1680px; }
.ed-head { flex-wrap: wrap; }
.ed-head-l { flex: 1; min-width: 200px; }
.ed-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ed-modes { display: flex; gap: 6px; padding: 2px 0 10px; }
.ed-tab.ok:not(.on) { border-color: var(--vert); color: var(--vert); }
.ed-fields textarea { field-sizing: content; min-height: 3.2em; max-height: 70vh; font-size: 15px; line-height: 1.45; }
.ed-fields input[type=text] { font-size: 15px; }
.ed-zone-cap textarea { min-height: 8em; }
.ed-valid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 8px; }
.ed-warn { color: var(--rouge); font-weight: 600; }
.rc-row > summary { cursor: pointer; font-size: 15px; padding: 2px 0; list-style-position: inside; }
.rc-row[open] > summary { margin-bottom: 10px; }
.rc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 900px) {
  .rc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px) minmax(0, 1.3fr); align-items: start; }
}
.rc-z { margin-bottom: 8px; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.rc-z span { display: block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--encre-2); }
.rc-img img { width: 100%; max-width: 340px; display: block; margin: 0 auto; border-radius: 10px; cursor: zoom-in; box-shadow: var(--ombre); }
.rc-img .slide-empty { aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--creme); }
.rc-cap-t { white-space: normal; font-size: 14.5px; line-height: 1.5; margin-bottom: 8px; overflow-wrap: anywhere; }
.ed-final p { margin-top: 0; }
.ed-phrase { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--creme); margin: 8px 0; }

/* ---------- Fiche jeu : onglets Fiche / Contenu réseau ------------------------------- */
.gm-tabs { display: flex; gap: 6px; background: var(--carte); border-radius: var(--radius); box-shadow: var(--ombre); padding: 5px; margin-bottom: 12px; }
.gm-tabs a { flex: 1; text-align: center; padding: 10px 8px; border-radius: 10px; font-weight: 700; font-size: 15px; color: var(--encre-2); text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 6px; }
.gm-tabs a.active { background: var(--encre); color: var(--creme); }
.gm-tabs .count { background: var(--terracotta); color: #fff; border-radius: 12px; font-size: 12px; padding: 1px 8px; }
.gm-mini { display: flex; align-items: center; gap: 12px; }
.gm-mini img, .gm-mini-ph { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex: none; background: var(--creme); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.gm-mini .gm-title { font-size: 19px; }

/* Choix des formats */
.rs-fmts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.rs-fmt { border: 1.5px solid var(--bord); border-radius: 12px; background: var(--carte); overflow: hidden; }
.rs-fmt.on { border-color: var(--fc); box-shadow: 0 0 0 1px var(--fc) inset; }
.rs-fmt-btn { all: unset; box-sizing: border-box; width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; color: var(--encre); }
.rs-fmt-btn:focus-visible { outline: 2px solid var(--fc); outline-offset: -2px; }
.rs-fmt-btn .grow { flex: 1; min-width: 0; }
.rs-fmt-btn small { display: block; color: var(--encre-2); font-size: 12.5px; font-weight: 400; margin-top: 2px; line-height: 1.3; }
.rs-ico { width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 19px; background: color-mix(in srgb, var(--fc) 22%, transparent); }
.rs-check { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 2px solid var(--bord); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; }
.rs-fmt.on .rs-check { background: var(--fc); border-color: var(--fc); }
.rs-fmt.on .rs-check::after { content: '✓'; }
.rs-date { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 12px 10px 58px; }
.rs-date input[type=date] { flex: 1; min-width: 140px; margin: 0; }
.rs-date .check { margin: 0; font-size: 13px; }

/* Checklist « À préparer » */
.rs-progress { height: 8px; border-radius: 6px; background: var(--creme); overflow: hidden; }
.rs-progress span { display: block; height: 100%; background: var(--vert); border-radius: 6px; }
.rs-need { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--bord); }
.rs-need:last-child { border-bottom: none; }
.rs-need .title { font-weight: 600; font-size: 14.5px; }
.rs-need .sub { font-size: 12.5px; color: var(--encre-2); }
.rs-tick { width: 22px; height: 22px; flex: none; border-radius: 6px; border: 2px solid var(--terracotta); display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; }
.rs-need.ok .rs-tick { background: var(--vert); border-color: var(--vert); }
.rs-need.ok .title { color: var(--encre-2); text-decoration: line-through; }

/* Dateline du jeu */
.rs-line { position: relative; }
.rs-item { display: grid; grid-template-columns: 52px 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 4px; border-radius: 10px; cursor: pointer; position: relative; }
.rs-item:hover { background: var(--creme); }
.rs-item::before { content: ''; position: absolute; left: 68px; top: 0; bottom: 0; width: 2px; background: var(--bord); }
.rs-day { text-align: center; line-height: 1.1; }
.rs-day strong { display: block; font-size: 19px; }
.rs-day span { font-size: 11.5px; color: var(--encre-2); text-transform: uppercase; }
.rs-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--fc); border: 3px solid var(--carte); box-shadow: 0 0 0 1.5px var(--fc); position: relative; z-index: 1; justify-self: center; }
.rs-item.done { opacity: .6; }
.rs-item.done .rs-dot { background: var(--carte); }
.rs-item.late .rs-day strong { color: var(--rouge); }
.rs-body .title { font-weight: 700; font-size: 14.5px; }
.rs-body .sub { margin-top: 3px; font-size: 12.5px; }
.rs-miss { color: var(--terracotta-dark); font-weight: 600; }
.rs-actions { display: flex; align-items: center; gap: 4px; }
.rs-actions input[type=date] { margin: 0; padding: 5px 6px; font-size: 13px; width: 132px; }
.rs-today { display: flex; align-items: center; gap: 8px; margin: 4px 0; color: var(--terracotta-dark); font-size: 12.5px; font-weight: 700; }
.rs-today::before, .rs-today::after { content: ''; height: 2px; background: var(--terracotta); flex: 1; border-radius: 2px; }
@media (max-width: 600px) {
  .rs-item { grid-template-columns: 44px 16px minmax(0, 1fr); }
  .rs-item::before { left: 56px; }
  .rs-actions { grid-column: 3; }
  .rs-date { padding-left: 12px; }
}
.rs-need .grow, .rs-body { flex: 1; min-width: 0; }
.rs-add > summary { list-style: none; cursor: pointer; }
.rs-add > summary::-webkit-details-marker { display: none; }
.rs-add > summary h2::after { content: '▾'; margin-left: auto; color: var(--encre-2); font-size: 14px; }
.rs-add:not([open]) > summary h2 { margin-bottom: 0; }
.rs-add[open] > summary h2::after { content: '▴'; }

/* ---- Accueil : compteurs, Créer, frise ------------------------------------------------ */
.hm-kpis { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.hm-kpi { all: unset; box-sizing: border-box; cursor: pointer; padding: 7px 12px; border-radius: 999px; font-size: 13.5px; background: var(--carte); border: 1.5px solid var(--bord); color: var(--encre); }
.hm-kpi strong { font-size: 15px; }
.hm-kpi.rouge { border-color: var(--rouge); color: var(--rouge); }
.hm-kpi.terracotta { border-color: var(--terracotta); color: var(--terracotta-dark); }
.hm-kpi.violet { border-color: var(--violet); color: var(--violet); }
.hm-kpi.bleu { border-color: var(--bleu); }
.hm-kpi.sable { border-color: var(--sable); }
.hm-kpi.gris { color: var(--encre-2); }
.hm-kpi:hover, .hm-kpi:focus-visible { background: var(--creme); }

.hm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr)); gap: 8px; }
.hm-tile { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--bord); background: var(--carte); color: var(--encre); font-weight: 600; font-size: 14px; min-width: 0; }
.hm-tile > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-tile .rs-ico { width: 32px; height: 32px; font-size: 17px; }
.hm-tile:hover, .hm-tile:focus-visible { border-color: var(--fc); box-shadow: 0 0 0 1px var(--fc) inset; }
.hm-tile.alt { border-style: dashed; }

.hm-cols { display: grid; gap: 0 16px; }
.hm-cols > div { min-width: 0; }
@media (min-width: 1150px) {
  .hm-cols { grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr); align-items: start; }
}

.hm-frise h2 { flex-wrap: wrap; gap: 8px; }
.hm-filter button { padding: 5px 10px; font-size: 13px; }
.hm-weeks { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; margin: 0 0 12px; }
.hm-wk { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 4px 2px; border-radius: 8px; text-align: center; min-width: 0; }
.hm-wk:hover, .hm-wk:focus-visible { background: var(--creme); }
.hm-wk-bar { display: flex; gap: 2px; height: 22px; }
.hm-wk-bar i { flex: 1; border-radius: 4px; background: var(--creme); border: 1px dashed var(--bord); }
.hm-wk-bar i.on { background: var(--sable); border: none; }
.hm-wk.full .hm-wk-bar i.on { background: var(--vert); }
.hm-wk.empty .hm-wk-bar i { border-color: var(--terracotta); }
.hm-wk-l { font-size: 11px; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-wk.now .hm-wk-l { color: var(--terracotta-dark); font-weight: 700; }

.hm-wk-h { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-weight: 700; font-size: 13.5px; color: var(--encre-2); text-transform: uppercase; letter-spacing: .3px; }
.hm-wk-h .btn { margin-left: auto; text-transform: none; letter-spacing: 0; }
.hm-wk-h.late { color: var(--rouge); }
.hm-none { margin: 2px 0 2px 78px; font-size: 13px; color: var(--encre-2); font-style: italic; }
.hm-more { display: block; margin: 10px auto 0; }
.hm-past > summary { cursor: pointer; font-size: 13.5px; color: var(--encre-2); padding: 6px 4px; }
.hm-mark .title { font-weight: 600; font-size: 14px; }
.hm-mico { width: 18px; text-align: center; font-size: 15px; justify-self: center; position: relative; z-index: 1; background: var(--carte); }
.hm-mark { padding-top: 4px; padding-bottom: 4px; }
.hm-mark.late .title { color: var(--rouge); }
.hm-games { display: block; margin-top: 3px; color: var(--encre-2); }
@media (max-width: 699px) {
  .hm-none { margin-left: 64px; }
  .hm-weeks { grid-template-columns: repeat(9, minmax(34px, 1fr)); overflow-x: auto; }
}

/* ---- Création guidée d'une publication ------------------------------------------------ */
.pc-fmts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.pc-fmt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 12px; border: 1.5px solid var(--bord); color: var(--encre); }
.pc-fmt:hover, .pc-fmt:focus-visible { border-color: var(--fc); box-shadow: 0 0 0 1px var(--fc) inset; }
.pc-fmt .grow { min-width: 0; }
.pc-fmt small { display: block; color: var(--encre-2); font-size: 12.5px; margin-top: 2px; line-height: 1.3; }
.pc-list { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pc-list li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; background: var(--creme); }
.pc-list .grow { flex: 1; min-width: 0; font-weight: 600; }
.pc-rank { width: 24px; height: 24px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; background: var(--carte); }
.pc-list.ranked .pc-rank { background: #FFC933; color: #2a2a2a; }
.pc-facet { margin: 8px 0; }
.pc-facet select { margin: 0; }
.pc-pool { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; max-height: 260px; overflow-y: auto; padding: 2px; }
.pc-pool-g { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 4px; align-items: center; padding: 5px; border-radius: 10px; border: 1.5px solid var(--bord); font-size: 12px; text-align: center; line-height: 1.2; color: var(--encre); }
.pc-pool-g img, .pc-noimg { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--creme); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.pc-pool-g.on { border-color: var(--vert); box-shadow: 0 0 0 1px var(--vert) inset; background: color-mix(in srgb, var(--vert) 12%, transparent); }
.pc-pool-g.on span::before { content: '✓ '; color: var(--vert); font-weight: 800; }
.pc-opt > summary { cursor: pointer; margin: 10px 0 4px; font-weight: 600; }
.pc-when { align-items: center; margin-top: 6px; }@media (max-width: 699px) {
  .hm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .hm-tile { flex-direction: column; gap: 4px; padding: 7px 2px; font-size: 11.5px; text-align: center; }
  .hm-tile > span:last-child { white-space: normal; line-height: 1.15; }
}

/* Page contenu unifiée : réglages repliables dans l'en-tête de l'éditeur */
.ed-settings { flex-basis: 100%; border-top: 1px solid var(--bord); margin-top: 4px; padding-top: 8px; }
.ed-settings > summary { cursor: pointer; font-weight: 700; color: var(--terracotta); list-style: none; }
.ed-settings > summary::-webkit-details-marker { display: none; }
.ed-settings > summary::before { content: '▸ '; }
.ed-settings[open] > summary::before { content: '▾ '; }
.ed-settings[open] > summary { margin-bottom: 8px; }
.ed-feel-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 6px; }
.ed-feel-h .btn { margin-left: auto; }
.ed-slide-ops { margin-left: auto; display: inline-flex; gap: 2px; }
.ed-fields h2 { display: flex; align-items: center; gap: 8px; }
.ed-tab-add { border-style: dashed; color: var(--terracotta); }
/* Lignes « textes | image | légende » éditables (editor.js) */
.rc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 15px; }
.rc-row .ed-fields textarea, .rc-row .ed-fields input[type=text], .rc-row .ed-fields select { width: 100%; box-sizing: border-box; }
.rc-img .ed-frame-wrap { max-width: 340px; margin: 0 auto; }
.rc-cap .ed-zone-cap textarea { min-height: 10em; }
.ed-copies { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 899px) { .rc-img { order: -1; } .rc-img img, .rc-img .ed-frame-wrap { max-width: 300px; } }

/* Commentaires Instagram : traduction anglaise + hashtags (sous la légende principale) */
.ed-comm { border-left: 3px solid var(--sable); padding-left: 10px; }
.ed-zone-cap.ed-comm textarea, .rc-cap .ed-zone-cap.ed-comm textarea { min-height: 5em; }
.ed-comm-act { margin-top: 6px; }
.ed-tags { font-size: 13px; margin-top: 4px; }
.ed-warn-orange { color: #c96a12; font-weight: 600; }
.btn.ed-copie { background: var(--vert); color: #fff; }

/* ==========================================================================
   Séries vidéo TCG (onglet « 🎬 Séries vidéo » de la fiche jeu)
   ========================================================================== */
.sv-grille { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 16px; align-items: start; }
.sv-gauche { position: sticky; top: 10px; }
@media (max-width: 820px) { .sv-grille { grid-template-columns: 1fr; } .sv-gauche { position: static; } }
.sv-titre-serie { font-size: 17px; }
.sv-phone { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 22px; overflow: hidden; background: #000;
  border: 6px solid #111; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); touch-action: none; }
.sv-phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sv-vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #888; font-size: 14px; text-align: center; padding: 20px; }
.sv-scene { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; transform-origin: 0 0; pointer-events: none; }
.sv-zones { position: absolute; inset: 0; pointer-events: none; }
.sv-zones div { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, rgba(255, 60, 60, .28) 0 8px, rgba(255, 60, 60, .12) 8px 16px);
  color: #fff; font-size: 11px; font-weight: 700; padding: 4px 8px; text-shadow: 0 1px 2px #000; }
.sv-edit { position: absolute; inset: 0; pointer-events: none; }
.sv-edit.on { pointer-events: auto; cursor: crosshair; }
.sv-sel { position: absolute; outline: 2px dashed #ffd84a; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); cursor: move; }
.sv-p { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #ffd84a; border: 2px solid #1d1747; transform: translate(-50%, -50%); }
.sv-p-taille { right: -16px; bottom: -16px; transform: none; cursor: nwse-resize; }
.sv-p-rot { left: 50%; top: -26px; cursor: grab; }
.sv-p-pt { background: #fff; cursor: move; }
.sv-lecture { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.sv-lecture input[type=range] { flex: 1; }
.sv-temps { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--encre-2); min-width: 52px; text-align: right; }
.sv-outils { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.sv-outils .seg { margin: 0; }
.sv-outils .btn.active { background: var(--encre); color: var(--creme); }
.sv-cadre-barre { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; padding: 8px 10px; border-radius: 12px; background: var(--carte); box-shadow: var(--ombre); font-size: 13px; }
.sv-trop { color: var(--rouge); font-weight: 700; }
.sv-cat { border: 1px solid var(--bord); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
.sv-cat-tete { display: flex; gap: 6px; align-items: center; padding: 6px 8px; background: color-mix(in srgb, var(--c) 22%, var(--carte)); border-bottom: 1px solid var(--bord); }
.sv-cat-tete input[type=text] { flex: 1; font-weight: 700; background: transparent; border-color: transparent; margin: 0; }
.sv-cat-tete input[type=color] { width: 30px; height: 30px; border: 0; padding: 0; background: none; flex: 0 0 auto; }
.sv-cat-corps { padding: 8px; }
.sv-ph { display: flex; gap: 4px; align-items: center; margin-bottom: 5px; }
.sv-ph input[type=text] { flex: 1; margin: 0; min-width: 0; }
.sv-len { font-size: 11px; color: var(--encre-2); width: 24px; text-align: right; }
.sv-x { color: var(--rouge); font-size: 18px; }
.sv-actions { flex-wrap: wrap; }
.sv-table-wrap { overflow-x: auto; }
.sv-table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
.sv-table td, .sv-table th { padding: 4px 5px; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: middle; }
.sv-table th { font-size: 12px; color: var(--encre-2); font-weight: 600; }
.sv-table tr { cursor: pointer; }
.sv-table tr.sel { background: color-mix(in srgb, var(--sable) 30%, transparent); }
.sv-table select { width: 100%; margin: 0; padding: 5px 6px; font-size: 13px; }
.sv-n { font-weight: 800; font-size: 16px; width: 40px; }
.sv-mini { width: 34px; height: 60px; object-fit: cover; border-radius: 5px; background: #222; color: #aaa; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.sv-mini.absente { background: #5a2a20; }
.sv-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.sv-table td:nth-child(4) { white-space: nowrap; }
.sv-table td:nth-child(4) select { width: calc(100% - 16px); }
.sv-json { width: 100%; min-height: 160px; font: 12px/1.4 ui-monospace, Menlo, monospace; }
.sv-calques { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-calque { border: 1px solid var(--bord); background: var(--carte); color: var(--encre); border-radius: 999px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; }
.sv-calque.active { background: var(--encre); color: var(--creme); }
.sv-calque.masque { opacity: .6; }
.sv-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.sv-assets { display: flex; flex-direction: column; gap: 8px; }
.sv-asset { display: flex; gap: 10px; align-items: center; }
.sv-asset-img { width: 64px; height: 48px; flex: 0 0 auto; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 12px 12px; overflow: hidden; }
.sv-asset-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
[data-carte-cadre] h3 { font-size: 14px; margin: 14px 0 6px; }
[data-carte-cadre] label:not(.sv-inline):not(.check):not(.btn) { display: block; }
[data-carte-cadre] label:not(.sv-inline):not(.check):not(.btn) input[type=text] { display: block; width: 100%; margin-top: 3px; }
.sv-grille > section { min-width: 0; }

/* Modifs de Claude (journal MCP) et demandes de correction */
.jm-item .sub { margin-top: 2px; }
.jm-annule { opacity: .55; }
.todo-corr { width: 100%; margin: 0 0 6px; }
.todo-corr s { opacity: .7; }

/* ==========================================================================
   Refonte v3 — lot 1 : navigation en 6 espaces, onglets d'espace, « Ma journée »
   ========================================================================== */
/* Pastilles de compteur dans le menu */
.nav-pastille {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--rouge); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.sidebar nav a .nav-pastille { margin-left: auto; }
.sidebar nav a.active .nav-pastille { background: #fff; color: var(--terracotta-dark); }
.sidebar nav hr { border: 0; border-top: 1px solid var(--bord); margin: 10px 4px; }
.tabbar a { position: relative; }
.tabbar a .nav-pastille { position: absolute; top: 6px; left: calc(50% + 6px); }
.tabbar a .lbl { white-space: nowrap; }

/* Bouton ☰ : mobile seulement (la barre latérale montre tout sur ordinateur) */
.topbar #btn-menu { margin-left: auto; margin-right: 8px; }
.topbar #btn-menu.active { color: var(--terracotta-dark); }
@media (min-width: 900px) { .topbar #btn-menu { display: none; } }

/* Onglets des pages de l'espace, sous le titre */
.sous-nav {
  position: sticky; top: 62px; z-index: 19;
  display: flex; gap: 6px; padding: 0 14px 10px; overflow-x: auto; scrollbar-width: none;
  background: var(--creme);
}
.sous-nav::-webkit-scrollbar { display: none; }
.sous-nav a {
  flex-shrink: 0; padding: 7px 14px; border-radius: 999px; text-decoration: none;
  background: var(--carte); color: var(--encre); border: 1px solid var(--bord); font-size: 14px; font-weight: 600;
}
.sous-nav a.active { background: var(--encre); color: var(--creme); border-color: var(--encre); }

/* Menu ☰ */
.menu-espaces { display: flex; flex-direction: column; gap: 12px; }
.menu-espace-t { display: block; font-weight: 700; font-size: 17px; text-decoration: none; color: var(--encre); padding: 4px 0; }
.menu-espace-sous { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 28px; }
.menu-espace-sous a { padding: 5px 11px; border-radius: 999px; background: var(--creme); border: 1px solid var(--bord); color: var(--encre); text-decoration: none; font-size: 14px; }

/* Ma journée */
.mj-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 12px; }

.mj-titre { font-size: 22px; }
a.btn { text-decoration: none; }
.mj-boutons { display: flex; gap: 8px; }
.mj-liste { padding: 6px 0; }
.mj-groupe + .mj-groupe { border-top: 1px solid var(--bord); }
.mj-groupe-h { display: flex; align-items: center; gap: 8px; padding: 12px 16px 4px; font-weight: 700; font-size: 14px; color: var(--encre-2); text-transform: uppercase; letter-spacing: .04em; }
.mj-groupe-h.retard { color: var(--rouge); }
.mj-ligne { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 16px; }
.mj-ligne + .mj-ligne { border-top: 1px dashed var(--bord); }
.mj-ligne.mj-retard { box-shadow: inset 3px 0 0 var(--rouge); }
.mj-ico { font-size: 20px; text-align: center; }
.mj-corps { min-width: 0; cursor: pointer; }
.mj-corps .title { font-weight: 600; overflow-wrap: anywhere; }
.mj-corps .sub { font-size: 13px; color: var(--encre-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.mj-actions { display: flex; gap: 6px; align-items: center; }
.mj-vide { text-align: center; padding: 28px 16px; }
.mj-vide-ico { font-size: 42px; }
.mj-reportes { padding: 8px 16px 4px; font-size: 13px; }
.mj-report-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.mj-report-choix .btn { line-height: 1.3; padding: 10px; }
.mj-ajout { display: flex; flex-direction: column; gap: 6px; }
.mj-ajout button.item { width: 100%; text-align: left; border: 1px solid var(--bord); background: var(--carte); color: var(--encre); font: inherit; cursor: pointer; }
@media (max-width: 560px) {
  .mj-ligne { grid-template-columns: 26px minmax(0, 1fr); }
  .mj-actions { grid-column: 2; justify-content: flex-start; }
}
.reglages-onglets { display: flex; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; max-width: 100%; }
.reglages-onglets button { flex-shrink: 0; white-space: nowrap; }

/* Courrier (lot 2) */
.cr-tete { display: flex; gap: 8px; margin-bottom: 10px; }
.cr-tete .search { flex: 1; margin: 0; }
.cr-statuts { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; max-width: 100%; }
.cr-statuts button { flex-shrink: 0; white-space: nowrap; }
.cr-liste { padding: 4px 0; }
.cr-ligne { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px 16px; cursor: pointer; }
.cr-ligne + .cr-ligne { border-top: 1px solid var(--bord); }
.cr-ligne.cr-a_traiter .cr-de, .cr-ligne.cr-a_traiter .cr-sujet { font-weight: 700; }
.cr-corps { min-width: 0; }
.cr-haut { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cr-de { overflow-wrap: anywhere; }
.cr-date { margin-left: auto; font-size: 13px; color: var(--encre-2); white-space: nowrap; }
.cr-sujet { overflow-wrap: anywhere; }
.cr-extrait { font-size: 14px; color: var(--encre-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-puces { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cr-puces:empty { display: none; }
.cr-synchro-info { font-size: 13px; padding: 0 4px; }
.cr-titre { font-size: 22px; margin: 8px 0 10px; overflow-wrap: anywhere; }
.cr-repondre { display: inline-block; margin-bottom: 12px; }
.cr-message { display: flex; flex-direction: column; gap: 6px; }
.cr-message.cr-envoye { border-left: 3px solid var(--vert); }
.cr-a { font-size: 13px; }
.cr-texte { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.cr-pieces { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-liens label { display: block; margin-top: 8px; }
.cr-liens .pubpick-row { display: flex; gap: 6px; align-items: center; }
.cr-liens select { flex: 1; min-width: 0; }
.cr-lien-val { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cr-code { margin: 12px 0; padding: 12px 14px; border: 1px dashed var(--bord); border-radius: 10px; background: var(--creme); }
.cr-code p { margin: 4px 0; }
.cr-code-val { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 30px; font-weight: 700; letter-spacing: .12em; margin: 6px 0; }
@media (max-width: 560px) {
  .cr-ligne { grid-template-columns: 34px minmax(0, 1fr); }
  .cr-ligne .mj-actions { grid-column: 2; }
}

/* Ludothèque (lot 3) : onglets, Ma collection, Ce soir, fiche à deux faces, formulaire en rubriques */
.ludo-onglets { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 10px 0 8px; max-width: 100%; }
.ludo-onglets button { flex-shrink: 0; white-space: nowrap; }
.filters .btn-ce-soir { background: var(--terracotta); color: #fff; border-color: var(--terracotta); }
.ludo-chro { font-size: 13px; }
.ludo-fgroupe { border-top: 1px solid var(--bord); padding: 8px 0; }
.ludo-fgroupe:first-child { border-top: 0; padding-top: 0; }
.ludo-fgroupe summary { cursor: pointer; font-weight: 700; padding: 4px 0; }
.ludo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.ludo-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; align-items: start; }
.ludo-cols > .card { margin: 0; }
.ludo-chronique summary { cursor: pointer; }
.cs-res { margin-top: 14px; }
.cs-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.cs-jeu { display: flex; flex-direction: column; gap: 3px; padding: 8px; border: 1px solid var(--bord); border-radius: 12px; background: var(--carte); color: var(--encre); text-decoration: none; }
.cs-jeu .ph { aspect-ratio: 1; border-radius: 8px; background: var(--creme); display: flex; align-items: center; justify-content: center; font-size: 32px; overflow: hidden; }
.cs-jeu .ph img { width: 100%; height: 100%; object-fit: cover; }
.cs-jeu .title { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.cs-jeu .sub { font-size: 12px; color: var(--encre-2); }
.cs-raisons { color: var(--terracotta-dark) !important; }
.gm-vers-chronique { display: block; text-decoration: none; color: var(--encre); border: 1px dashed var(--bord); }
.gm-vierge .linkrow { margin-top: 8px; }
.gm-presse h2 .btn, .gm-presse h2 { display: flex; align-items: center; gap: 8px; }
.gm-presse h2 .btn { margin-left: auto; }
.gm-form-groupe { border: 1px solid var(--bord); border-radius: 12px; padding: 4px 12px 10px; margin-bottom: 10px; }
.gm-form-groupe summary { cursor: pointer; font-weight: 700; padding: 8px 0; }

/* Presse (lot 4) : engagements, fiche éditeur */
.eng.eng-retard { box-shadow: inset 3px 0 0 var(--rouge); }
.eng.eng-ferme { opacity: .65; }
.pb-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-top: 12px; }
.pb-kpis a.stat { text-decoration: none; color: inherit; }
.pb-prochain { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--creme); }
.pb-prochain.retard { background: color-mix(in srgb, var(--rouge) 14%, var(--carte)); }
.pb-fil-detail { font-size: 13px; overflow-wrap: anywhere; }
/* Orthographe (éditeur) : remarques LanguageTool une par une */
.ed-ortho { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.or-liste { max-height: 55vh; overflow-y: auto; }
.or-item { border-bottom: 1px solid var(--bord); padding: 8px 0; }
.or-contexte { margin: 6px 0 2px; font-size: 14.5px; }
.or-contexte mark { background: color-mix(in srgb, var(--terracotta) 28%, transparent); color: inherit; border-radius: 4px; padding: 0 2px; }
.mcp-poids { font-size: 15px; margin: 8px 0 10px; }
.mcp-famille { align-items: flex-start; margin: 8px 0; }
.mcp-famille > span { flex: 1; min-width: 0; }
/* Instagram : assistant de mise en route (lot 9) */
.ig-etape { border: 1px solid var(--bord); border-radius: 12px; padding: 8px 12px; margin: 8px 0; }
.ig-etape > summary { cursor: pointer; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.ig-num { width: 24px; height: 24px; border-radius: 12px; background: var(--sable); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.ig-etape.fait .ig-num { background: var(--vert, #2EC4A6); color: #fff; }
.ig-etape-corps { padding: 6px 0 4px; }
.ig-etape-corps ol { padding-left: 20px; }
.ig-meta input { width: 100%; }
/* Communauté › Commentaires (lot 9) */
.ci-texte { margin: 6px 0; font-size: 15px; overflow-wrap: anywhere; }
.ci-reponse { width: 100%; }
.ci-envoyee { margin: 4px 0 0; color: var(--encre-2); overflow-wrap: anywhere; }

/* --- Accueil visuel : compteurs, quinzaine, pipeline des publications ------------------------- */
.tb-compteurs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 0 12px; padding-bottom: 2px; }
.tb-compteurs::-webkit-scrollbar { display: none; }
.tb-compteur { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--tc, var(--bord)); background: var(--carte); color: var(--encre); white-space: nowrap; }
.tb-compteur .tb-c-n { font-weight: 800; font-size: 17px; color: var(--tc, var(--encre)); }
.tb-compteur .tb-c-l { font-size: 13.5px; color: var(--encre-2); }
.tb-compteur.on { background: var(--tc); }
.tb-compteur.on .tb-c-n, .tb-compteur.on .tb-c-l { color: #fff; }
.tb-compteur:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; }
.ton-rouge { --tc: var(--rouge); } .ton-terracotta { --tc: var(--terracotta); } .ton-violet { --tc: var(--violet); }
.ton-bleu { --tc: var(--bleu); } .ton-sable { --tc: var(--sable); }

.tb-quinzaine h2, .tb-pipeline h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tb-cad { font-size: 12.5px; font-weight: 500; color: var(--encre-2); display: inline-flex; align-items: center; gap: 6px; }
.tb-frise { margin-left: auto; }
.tb-jauge { display: inline-flex; gap: 2px; }
.tb-jauge i { width: 9px; height: 9px; border-radius: 3px; border: 1px dashed var(--bord); }
.tb-jauge i.on { background: var(--sable); border: none; }
.tb-jauge.pleine i.on { background: var(--vert); }
.tb-jours { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; scrollbar-width: thin; }
.tb-jour { flex: 0 0 45%; scroll-snap-align: start; min-height: 112px; display: flex; flex-direction: column; gap: 5px; padding: 8px; border-radius: 12px; background: var(--creme); border: 1px solid var(--bord); min-width: 0; }
.tb-jour.passe { opacity: .72; }
.tb-jour.auj { border: 2px solid var(--terracotta); background: color-mix(in srgb, var(--terracotta) 9%, var(--carte)); }
.tb-jour-h { display: flex; align-items: baseline; justify-content: space-between; font-size: 12px; color: var(--encre-2); text-transform: capitalize; }
.tb-jour-h strong { font-size: 18px; color: var(--encre); }
.tb-jour.auj .tb-jour-h span { color: var(--terracotta-dark); font-weight: 700; }
.tb-pub { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 5px; align-items: center; padding: 6px 7px; border-radius: 8px; background: var(--carte); border-left: 4px solid var(--fc); color: var(--encre); text-decoration: none; font-size: 12.5px; line-height: 1.25; box-shadow: var(--ombre); }
.tb-pub-ico { grid-row: span 2; font-size: 16px; }
.tb-pub-t { font-weight: 650; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tb-pub-st { font-size: 11px; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-pub.st-publie { background: color-mix(in srgb, var(--vert) 16%, var(--carte)); }
.tb-pub.st-publie .tb-pub-st { color: var(--vert); font-weight: 700; }
.tb-pub.st-pret .tb-pub-st { color: var(--terracotta-dark); font-weight: 700; }
.tb-pub.late { box-shadow: 0 0 0 1.5px var(--rouge) inset; }
.tb-pub.late .tb-pub-st { color: var(--rouge); font-weight: 700; }
.tb-marque { font-size: 11.5px; color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-plus { all: unset; box-sizing: border-box; cursor: pointer; margin-top: auto; text-align: center; padding: 6px; border-radius: 8px; border: 1.5px dashed var(--bord); color: var(--encre-2); font-size: 16px; }
.tb-plus:hover, .tb-plus:focus-visible { border-color: var(--terracotta); color: var(--terracotta); }
@media (min-width: 560px) { .tb-jour { flex-basis: 27%; } }
@media (min-width: 1000px) {
  .tb-jours { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: visible; }
  .tb-jour { min-height: 120px; }
}

.tb-etapes { display: flex; align-items: stretch; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tb-etapes::-webkit-scrollbar { display: none; }
.tb-etape { all: unset; box-sizing: border-box; cursor: pointer; flex: 1 0 92px; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: 12px; background: var(--creme); border: 1.5px solid transparent; }
.tb-etape.on { border-color: var(--terracotta); background: var(--carte); }
.tb-etape:focus-visible { outline: 2px solid var(--terracotta); }
.tb-et-n { font-size: 26px; font-weight: 800; line-height: 1; }
.tb-et-l { font-size: 12.5px; color: var(--encre-2); white-space: nowrap; }
.tb-et-pts { display: flex; gap: 3px; flex-wrap: wrap; min-height: 8px; }
.tb-et-pts i { width: 8px; height: 8px; border-radius: 50%; }
.et-relire .tb-et-n { color: var(--violet); } .et-pret .tb-et-n { color: var(--terracotta-dark); } .et-publie .tb-et-n { color: var(--vert); }
.tb-fleche { align-self: center; color: var(--encre-2); font-size: 18px; flex: none; }
.tb-et-detail { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.tb-et-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; border-left: 4px solid var(--fc); background: var(--creme); color: var(--encre); text-decoration: none; font-size: 14px; }
.tb-et-item .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tb-af-h { display: flex; align-items: center; gap: 8px; padding: 6px 16px 0; }
.tb-plus-liste { margin: 6px 16px 4px; }
.tb-tuiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tb-tuile { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--bord); font-size: 14px; font-weight: 600; }
.tb-tuile span { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--fc) 22%, transparent); }
.tb-tuile:hover, .tb-tuile:focus-visible { border-color: var(--fc); }
@media (max-width: 1149px) { .tb-creer { display: none; } }

/* --- Slides animées (carrousel-anime) ----------------------------------------------------------- */
.ca-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ca-vids { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ca-coche { display: inline-flex; align-items: center; margin-right: 6px; cursor: pointer; }
.ca-coche input { width: 18px; height: 18px; accent-color: var(--terracotta); }
.rc-img { position: relative; }
.ca-badge { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); border: none; border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 13px; cursor: pointer;
  background: rgba(29, 23, 71, 0.85); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.ca-badge.attente { cursor: default; background: rgba(29, 23, 71, 0.6); }

/* --- Version film (timeline du scénario) ------------------------------------------------------------ */
.pf-barre { display: flex; height: 30px; border-radius: 8px; overflow: hidden; margin: 12px 0; }
.pf-barre span { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; border-right: 2px solid var(--carte); min-width: 0; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.pf-carte { border-left: 6px solid var(--pc); cursor: grab; }
.pf-carte.pf-tire { opacity: .45; }
.pf-carte.pf-survol { box-shadow: 0 0 0 3px var(--terracotta); }
.pf-carte-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pf-poignee { color: var(--encre-2); font-size: 18px; }
.pf-ops { margin-left: auto; display: flex; }
.pf-carte-c { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; margin-top: 8px; }
.pf-apercu img, .pf-vide { width: 110px; aspect-ratio: 9 / 16; border-radius: 8px; object-fit: cover; display: block; cursor: zoom-in; }
.pf-vide { display: flex; align-items: center; justify-content: center; font-size: 34px; background: color-mix(in srgb, var(--pc) 25%, var(--creme)); cursor: default; }
.pf-resume { margin: 0 0 8px; overflow-wrap: anywhere; }
.pf-films .item { flex-wrap: wrap; }
.pf-films .item .grow { min-width: 180px; }