/* ============================================================
   PIC — Programme d'Interaction Collaboratif · by Majin
   Charte graphique Orange (octobre 2015)
   ============================================================ */

:root{
  /* Principales */
  --o-orange:#FF7900;
  --o-black:#000000;
  --o-white:#FFFFFF;
  --o-grey-1:#D6D6D6;
  --o-grey-2:#8F8F8F;
  --o-grey-3:#595959;

  /* Secondaires */
  --o-blue:#4BB4E6;   --o-blue-d:#085EBD;   --o-blue-l:#B5E8F7;
  --o-green:#50BE87;  --o-green-d:#0A6E31;  --o-green-l:#B8EBD6;
  --o-pink:#FFB4E6;   --o-pink-d:#FF8AD4;   --o-pink-l:#FFE8F7;
  --o-purple:#A885D8; --o-purple-d:#492191; --o-purple-l:#D9C2F0;
  --o-yellow:#FFD200; --o-yellow-d:#FFB400; --o-yellow-l:#FFF6B6;

  /* Surfaces */
  --page:#F1F1F1;
  --surface:#FFFFFF;
  --line:#D6D6D6;
  --line-strong:#000000;

  --radius:0px;              /* La charte Orange est carrée. Assumé. */
  --row-h:44px;
  --gutter:clamp(12px,2.2vw,28px);
  --shadow:0 2px 0 rgba(0,0,0,.08), 0 12px 30px rgba(0,0,0,.10);

  --ff:"Helvetica Neue",Helvetica,Arial,"Liberation Sans",sans-serif;
  --fs-micro:11px;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff);
  background:var(--page);
  color:var(--o-black);
  font-size:15px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
kbd{
  font-family:var(--ff);font-size:11px;background:var(--o-white);
  border:1px solid var(--line);padding:1px 5px;
}
:focus-visible{outline:3px solid var(--o-orange);outline-offset:2px}

/* ============ Écran d'ouverture ============ */
.splash{
  position:fixed;inset:0;z-index:200;background:var(--o-black);
  display:grid;place-items:center;
  animation:splashOut .5s cubic-bezier(.7,0,.2,1) 1.55s forwards;
}
.splash-grid{
  display:grid;grid-template-columns:repeat(3,26px);grid-auto-rows:26px;gap:4px;
}
.splash-grid span{
  background:var(--o-orange);transform:scale(0);
  animation:sqPop .5s cubic-bezier(.2,1.5,.4,1) forwards;
}
.splash-grid span:nth-child(1){animation-delay:.02s}
.splash-grid span:nth-child(2){animation-delay:.10s;background:var(--o-white)}
.splash-grid span:nth-child(3){animation-delay:.18s}
.splash-grid span:nth-child(4){animation-delay:.26s;background:var(--o-white)}
.splash-grid span:nth-child(5){animation-delay:.34s}
.splash-grid span:nth-child(6){animation-delay:.42s;background:var(--o-white)}
.splash-grid span:nth-child(7){animation-delay:.50s}
.splash-grid span:nth-child(8){animation-delay:.58s;background:var(--o-white)}
.splash-grid span:nth-child(9){animation-delay:.66s}
.splash-word{
  position:absolute;color:var(--o-white);font-size:13px;letter-spacing:.6em;
  font-weight:700;text-transform:uppercase;margin-top:130px;opacity:0;
  animation:fadeUp .5s ease .8s forwards;
}
@keyframes sqPop{to{transform:scale(1)}}
@keyframes splashOut{to{opacity:0;visibility:hidden}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.splash.is-done{display:none}

/* ============ En-tête ============ */
.app-head{
  position:sticky;top:0;z-index:40;
  background:var(--o-black);color:var(--o-white);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px var(--gutter);
  padding-top:calc(10px + env(safe-area-inset-top));
}
.head-left{display:flex;align-items:center;gap:14px;min-width:0}
.logo-square{
  width:46px;height:46px;background:var(--o-orange);
  display:grid;place-items:center;flex:0 0 auto;
  position:relative;overflow:hidden;cursor:pointer;
  animation:logoIn .6s cubic-bezier(.2,1.4,.4,1) 1.7s both;
  transition:transform .18s cubic-bezier(.2,1.4,.4,1);
  border:0;
}
.logo-square:hover{transform:scale(1.10)}
.logo-square:active{transform:scale(.93)}

/* Texte PIC */
.logo-square > span:first-child{
  font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--o-white);
  position:relative;z-index:2;
  animation:logoTxtPulse 4s ease-in-out 2.5s infinite;
}
@keyframes logoTxtPulse{
  0%,100%{transform:scale(1);opacity:1}
  45%{transform:scale(1.18);opacity:.85}
  50%{transform:scale(1.22);opacity:1}
  55%{transform:scale(1.18);opacity:.85}
}

/* Deux micro-carrés qui tournent en fond */
.logo-sq-a,.logo-sq-b{
  position:absolute;width:10px;height:10px;background:rgba(255,255,255,.22);
  animation:sqOrbit 5s linear 2.5s infinite;
}
.logo-sq-a{
  top:5px;left:5px;transform-origin:28px 28px;
}
.logo-sq-b{
  bottom:5px;right:5px;transform-origin:-18px -18px;
  animation-delay:4.75s;
}
@keyframes sqOrbit{
  from{transform:rotate(0)}
  to{transform:rotate(360deg)}
}

/* Flash orange clair au clic */
.logo-square::after{
  content:"";position:absolute;inset:0;
  background:rgba(255,255,255,.35);
  transform:scale(0);border-radius:50%;opacity:0;
  transition:transform .0s,opacity .0s;
  pointer-events:none;
}
.logo-square.is-clicked::after{
  transform:scale(2.5);opacity:0;
  transition:transform .42s cubic-bezier(.2,.8,.3,1),opacity .42s ease;
}
.head-titles{min-width:0}
.app-head h1{
  margin:0;font-size:clamp(13px,1.9vw,18px);font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.head-sub{
  margin:1px 0 0;font-size:var(--fs-micro);color:var(--o-grey-1);
  letter-spacing:.06em;text-transform:uppercase;
}
.head-sub span{color:var(--o-orange);font-weight:700}
.head-right{display:flex;align-items:center;gap:8px}
.majin-block{
  background:var(--o-white);color:var(--o-black);
  font-style:italic;font-weight:700;font-size:13px;
  padding:6px 12px;letter-spacing:.01em;
}

/* ============ Boutons ============ */
.primary-btn{
  background:var(--o-orange);color:var(--o-white);
  font-weight:700;font-size:14px;padding:10px 18px;
  border:2px solid var(--o-orange);
  transition:background .18s ease,color .18s ease,transform .12s ease;
}
.primary-btn:hover{background:var(--o-black);border-color:var(--o-black)}
.primary-btn:active{transform:translateY(1px)}
.ghost-btn{
  background:transparent;border:2px solid currentColor;
  font-weight:700;font-size:13px;padding:8px 14px;
  transition:background .18s ease,color .18s ease;
}
.app-head .ghost-btn{color:var(--o-white)}
.app-head .ghost-btn:hover{background:var(--o-white);color:var(--o-black)}
.toolbar .ghost-btn,.sheet .ghost-btn{color:var(--o-black);background:var(--o-white)}
.toolbar .ghost-btn:hover,.sheet .ghost-btn:hover{background:var(--o-black);color:var(--o-white)}
.icon-btn{
  width:38px;height:38px;display:grid;place-items:center;
  font-size:17px;border:2px solid transparent;
  transition:background .18s ease,color .18s ease,transform .3s ease;
}
.app-head .icon-btn{color:var(--o-white)}
.app-head .icon-btn:hover{background:var(--o-orange);transform:rotate(90deg)}
.danger-btn{
  color:var(--o-grey-3);border:2px solid var(--line);background:var(--o-white);
  font-weight:700;font-size:13px;padding:8px 14px;transition:.18s ease;
}
.danger-btn:hover{background:var(--o-black);color:var(--o-white);border-color:var(--o-black)}

/* ============ Onglets ============ */
.tabs{
  position:sticky;top:66px;z-index:35;
  background:var(--o-white);border-bottom:2px solid var(--o-black);
  display:flex;align-items:stretch;gap:0;padding:0 var(--gutter);
  overflow-x:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  position:relative;padding:14px 20px;font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--o-grey-2);
  white-space:nowrap;transition:color .2s ease;
}
.tab:hover{color:var(--o-black)}
.tab.is-active{color:var(--o-black)}
.tab::after{
  content:"";position:absolute;left:20px;right:20px;bottom:-2px;height:4px;
  background:var(--o-orange);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.7,0,.2,1);
}
.tab.is-active::after{transform:scaleX(1)}
.tab-badge{
  display:inline-block;margin-left:8px;background:var(--o-grey-1);color:var(--o-black);
  font-size:11px;padding:1px 7px;font-variant-numeric:tabular-nums;
}
.tab.is-active .tab-badge{background:var(--o-orange);color:var(--o-white)}

/* ============ Structure ============ */
.app-main{padding:var(--gutter);padding-bottom:80px;max-width:1800px;margin:0 auto}
.view{display:none}
.view.is-active{display:block;animation:viewIn .35s cubic-bezier(.2,.8,.3,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.toolbar{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px;
}
.toolbar-end{margin-left:auto;display:flex;gap:8px}
.search-wrap{flex:1 1 260px;min-width:200px;position:relative}
.toolbar input[type=search],.toolbar select{
  width:100%;background:var(--o-white);border:2px solid var(--line);
  padding:9px 12px;transition:border-color .18s ease;
}
.toolbar select{width:auto;min-width:170px;cursor:pointer}
.toolbar input[type=search]:focus,.toolbar select:focus{border-color:var(--o-orange);outline:none}

/* ============ Tableau ============ */
.table-scroll{
  background:var(--o-white);border:2px solid var(--o-black);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.pic-table{width:100%;min-width:940px;table-layout:fixed;border-collapse:collapse;font-size:13.5px}
.pic-table th{
  position:sticky;top:0;z-index:2;background:var(--o-white);
  border:1px solid var(--o-black);border-top:0;
  padding:10px 8px;text-align:center;vertical-align:middle;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  white-space:normal;overflow-wrap:anywhere;user-select:none;line-height:1.25;
}
.pic-table th.sortable{cursor:pointer;transition:background .18s ease}
.pic-table th.sortable:hover{background:var(--o-yellow-l)}
.pic-table th .sort-mark{color:var(--o-orange);font-size:10px;margin-left:5px;opacity:0}
.pic-table th.is-sorted{background:var(--o-orange);color:var(--o-white)}
.pic-table th.is-sorted .sort-mark{opacity:1;color:var(--o-white)}
.pic-table th.col-status{width:12px;padding:0}
.pic-table th.col-check,.pic-table th.col-tools{width:44px}

.pic-table td{
  border:1px solid var(--line);padding:0;vertical-align:middle;
  text-align:center;height:var(--row-h);
}
.pic-table tbody tr{
  animation:rowIn .35s cubic-bezier(.2,.8,.3,1) both;
  transition:background .16s ease;
}
.pic-table tbody tr:hover{background:#FFF7EF}
@keyframes rowIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.pic-table tbody tr.is-leaving{animation:rowOut .45s cubic-bezier(.6,0,.3,1) forwards}
@keyframes rowOut{
  40%{background:var(--o-green-l)}
  to{opacity:0;transform:translateX(60px) scale(.97)}
}

.cell{
  display:block;width:100%;min-height:var(--row-h);
  padding:7px 8px;cursor:text;
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .15s ease;
}
.cell:hover{box-shadow:inset 0 0 0 2px var(--o-yellow)}
.cell.is-empty::after{content:"—";color:var(--o-grey-1)}
.cell-text{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;text-align:center;overflow-wrap:anywhere;
}
td.k-sujet .cell{font-weight:700}
td.k-collaboration .cell,td.k-objectif .cell{color:var(--o-blue-d)}
td.k-action .cell{color:var(--o-green-d)}
td.k-commentaire .cell{color:var(--o-blue-d)}
td.k-rex .cell{color:var(--o-grey-3)}
td.k-date .cell,td.k-echeance .cell{font-variant-numeric:tabular-nums;white-space:nowrap}

.cell-editor{
  width:100%;min-height:calc(var(--row-h) - 8px);border:2px solid var(--o-orange);
  padding:5px 6px;resize:none;text-align:center;font-size:13.5px;
  background:var(--o-white);outline:none;
}
.cell-editor:focus{box-shadow:0 0 0 3px rgba(255,121,0,.25)}

/* Rail de statut */
td.col-status{width:12px;padding:0;border-right:0;position:relative}
.status-rail{position:absolute;inset:0;display:block}
.st-late{background:var(--o-orange)}
.st-today{background:var(--o-yellow)}
.st-soon{background:var(--o-blue)}
.st-far{background:var(--o-grey-1)}
.st-none{background:var(--o-white)}
.st-done{background:var(--o-green)}

/* Case à cocher d'archivage */
.check-box{
  width:24px;height:24px;border:2px solid var(--o-black);background:var(--o-white);
  display:grid;place-items:center;margin:auto;position:relative;
  transition:background .2s ease,border-color .2s ease,transform .15s ease;
}
.check-box:hover{border-color:var(--o-green-d);background:var(--o-green-l);transform:scale(1.12)}
.check-box::after{
  content:"";width:12px;height:6px;border-left:3px solid var(--o-white);
  border-bottom:3px solid var(--o-white);transform:rotate(-45deg) scale(0);
  transition:transform .2s cubic-bezier(.2,1.6,.4,1);margin-top:-3px;
}
.check-box.is-on{background:var(--o-green-d);border-color:var(--o-green-d)}
.check-box.is-on::after{transform:rotate(-45deg) scale(1)}
.tool-open{
  width:28px;height:28px;display:grid;place-items:center;margin:auto;
  color:var(--o-grey-2);font-size:15px;transition:.18s ease;
}
.tool-open:hover{color:var(--o-white);background:var(--o-black)}

/* Éclat de satisfaction */
.burst{position:fixed;pointer-events:none;z-index:150;width:10px;height:10px}
.burst i{position:absolute;width:8px;height:8px;background:var(--o-green);display:block}
@keyframes burstOut{to{transform:translate(var(--bx),var(--by)) rotate(var(--br));opacity:0}}

/* ============ Vide & indices ============ */
.empty{
  background:var(--o-white);border:2px dashed var(--line);
  padding:56px 24px;text-align:center;
}
.empty-square{
  width:44px;height:44px;background:var(--o-orange);margin:0 auto 18px;
  animation:pulseSq 2.4s ease-in-out infinite;
}
.empty-square.is-green{background:var(--o-green)}
@keyframes pulseSq{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(45deg) scale(.82)}}
.empty-title{margin:0 0 6px;font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.04em}
.empty-text{margin:0 0 20px;color:var(--o-grey-3);max-width:44ch;margin-inline:auto}
.hint{
  margin:10px 2px 0;font-size:var(--fs-micro);color:var(--o-grey-2);
  text-transform:uppercase;letter-spacing:.05em;
}

/* ============ Archives / REX ============ */
.rex-list{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.rex-card{
  background:var(--o-white);border:2px solid var(--o-black);
  border-left:10px solid var(--o-green);
  padding:16px 18px;display:grid;gap:10px;
  animation:rowIn .4s cubic-bezier(.2,.8,.3,1) both;
  transition:transform .18s ease,box-shadow .18s ease;
}
.rex-card:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.rex-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.rex-sujet{font-weight:700;font-size:16px;margin:0}
.rex-meta{
  display:flex;flex-wrap:wrap;gap:6px;margin-left:auto;
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.05em;
}
.chip{padding:3px 9px;background:var(--o-grey-1);font-weight:700;white-space:nowrap}
.chip-collab{background:var(--o-blue-l);color:var(--o-blue-d)}
.chip-date{background:var(--o-white);border:1px solid var(--line);color:var(--o-grey-3)}
.chip-delay{background:var(--o-green-l);color:var(--o-green-d)}
.rex-body{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rex-field{border-left:3px solid var(--line);padding-left:10px}
.rex-field.is-rex{border-left-color:var(--o-orange)}
.rex-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--o-grey-2);font-weight:700;display:block;margin-bottom:2px;
}
.rex-value{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.rex-actions{display:flex;gap:8px;justify-content:flex-end}
.mini-btn{
  font-size:12px;font-weight:700;padding:5px 11px;border:2px solid var(--line);
  background:var(--o-white);transition:.18s ease;
}
.mini-btn:hover{background:var(--o-black);color:var(--o-white);border-color:var(--o-black)}

/* ============ Tableau de bord ============ */
.kpi-row{
  display:grid;gap:12px;margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.kpi{
  background:var(--o-white);border:2px solid var(--o-black);padding:16px;
  position:relative;overflow:hidden;
}
.kpi::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:6px;background:var(--o-grey-1);
}
.kpi.k-orange::before{background:var(--o-orange)}
.kpi.k-green::before{background:var(--o-green)}
.kpi.k-blue::before{background:var(--o-blue)}
.kpi.k-yellow::before{background:var(--o-yellow)}
.kpi.k-purple::before{background:var(--o-purple)}
.kpi-num{
  font-size:clamp(30px,4.4vw,42px);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;margin:6px 0 4px;
}
.kpi-label{
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.09em;
  color:var(--o-grey-3);font-weight:700;
}
.kpi-note{font-size:12px;color:var(--o-grey-2);margin:0}

.board-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.panel{background:var(--o-white);border:2px solid var(--o-black);padding:18px}
.panel-title{
  margin:0 0 16px;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;padding-bottom:8px;border-bottom:2px solid var(--o-black);
}
.bars{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
.bar-head{display:flex;gap:10px;justify-content:space-between;font-size:13px;font-weight:700}
.bar-head span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar-head .muted{color:var(--o-grey-2);font-weight:400;font-variant-numeric:tabular-nums}
.bar-track{height:16px;background:var(--o-grey-1);display:flex}
.bar-fill{display:block;height:100%;width:0;transition:width .8s cubic-bezier(.2,.8,.3,1)}
.bar-fill.f-open{background:var(--o-orange)}
.bar-fill.f-done{background:var(--o-green)}

.months{display:flex;align-items:flex-end;gap:8px;height:160px;padding-top:10px}
.month{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.month-cols{display:flex;align-items:flex-end;gap:3px;flex:1;width:100%;justify-content:center}
.month-col{display:block;width:14px;height:0;transition:height .8s cubic-bezier(.2,.8,.3,1)}
.month-col.c-open{background:var(--o-orange)}
.month-col.c-done{background:var(--o-green)}
.month-name{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--o-grey-3);font-weight:700}
.legend{display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--o-grey-3)}
.legend span{display:flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;display:block}
.dot-orange{background:var(--o-orange)}
.dot-green{background:var(--o-green)}

.donut-wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.seg-row{display:flex;align-items:center;gap:10px}
.seg-key{display:flex;align-items:center;gap:8px;font-size:13px;min-width:130px}
.seg-track{flex:1;height:22px;background:var(--o-grey-1)}
.seg-fill{display:block;height:100%;width:0;transition:width .8s cubic-bezier(.2,.8,.3,1)}
.seg-num{font-weight:700;font-variant-numeric:tabular-nums;min-width:28px;text-align:right}

.next-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.next-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  border:1px solid var(--line);border-left:6px solid var(--o-blue);
  transition:.18s ease;cursor:pointer;
}
.next-item:hover{background:var(--o-blue-l)}
.next-item.n-late{border-left-color:var(--o-orange)}
.next-item.n-late:hover{background:#FFE9D6}
.next-item.n-today{border-left-color:var(--o-yellow)}
.next-item.n-today:hover{background:var(--o-yellow-l)}
.next-sujet{flex:1;min-width:0;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.next-when{flex:0 0 auto;margin-left:auto;font-size:12px;color:var(--o-grey-3);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ============ Panneaux latéraux ============ */
.sheet-backdrop{
  position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.5);
  display:flex;justify-content:flex-end;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{
  background:var(--o-white);width:min(560px,100%);height:100%;
  display:flex;flex-direction:column;border-left:6px solid var(--o-orange);
  animation:sheetIn .35s cubic-bezier(.2,.9,.3,1);
}
@keyframes sheetIn{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
.sheet-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 20px;border-bottom:2px solid var(--o-black);
}
.sheet-head h2{margin:0;font-size:19px;font-weight:700}
.sheet-eyebrow{
  margin:0 0 2px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--o-orange);font-weight:700;
}
.sheet-head .icon-btn{color:var(--o-black)}
.sheet-head .icon-btn:hover{background:var(--o-black);color:var(--o-white)}
.sheet-body{flex:1;overflow-y:auto;padding:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start}
.sheet-foot{
  padding:14px 20px;border-top:2px solid var(--o-black);
  display:flex;gap:10px;align-items:center;
  padding-bottom:calc(14px + env(safe-area-inset-bottom));
}
.sheet-foot-end{margin-left:auto;display:flex;gap:10px}

.form-field{display:grid;grid-template-columns:minmax(0,1fr);gap:5px}
.form-field label{
  font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  font-weight:700;color:var(--o-grey-3);
}
.form-field input,.form-field textarea{
  border:2px solid var(--line);padding:9px 11px;background:var(--o-white);
  transition:border-color .18s ease;width:100%;
}
.form-field textarea{min-height:74px;resize:vertical}
.form-field input:focus,.form-field textarea:focus{border-color:var(--o-orange);outline:none}
.form-field.is-rex input,.form-field.is-rex textarea{border-color:var(--o-orange);background:#FFFBF7}
.form-field.is-rex label{color:var(--o-orange)}

/* Réglages */
.cfg-block{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.cfg-block:last-child{border-bottom:0}
.cfg-block h3{
  margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.09em;
  padding-left:10px;border-left:5px solid var(--o-orange);
}
.cfg-note{margin:0;font-size:12px;color:var(--o-grey-2)}
.col-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.col-item{display:flex;align-items:center;gap:10px;border:1px solid var(--line);padding:7px 9px}
.col-item input[type=text]{flex:1;border:0;border-bottom:2px solid transparent;padding:4px 2px;min-width:0}
.col-item input[type=text]:focus{border-bottom-color:var(--o-orange);outline:none}
.col-item .grip{color:var(--o-grey-1);font-size:14px}
.switch-row,.field-row{display:flex;align-items:center;gap:10px;font-size:14px}
.field-row span{flex:1}
.field-row select{border:2px solid var(--line);padding:6px 9px;background:var(--o-white)}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--o-orange);flex:0 0 auto}
.cfg-actions{display:flex;flex-wrap:wrap;gap:8px}

/* ============ Toasts ============ */
.toast-stack{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  z-index:180;display:grid;gap:8px;width:min(460px,calc(100% - 32px));
  bottom:calc(24px + env(safe-area-inset-bottom));
}
.toast{
  background:var(--o-black);color:var(--o-white);padding:13px 16px;
  display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);
  animation:toastIn .3s cubic-bezier(.2,1.2,.4,1);
  border-left:6px solid var(--o-orange);
}
.toast.is-ok{border-left-color:var(--o-green)}
.toast.is-warn{border-left-color:var(--o-yellow)}
.toast.is-out{animation:toastOut .3s ease forwards}
.toast p{margin:0;font-size:14px;flex:1}
.toast button{
  color:var(--o-orange);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;
}
.toast button:hover{text-decoration:underline}
@keyframes toastIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}

/* ============ Responsive ============ */
@media(max-width:900px){
  .tabs{top:62px}
  .toolbar-end{margin-left:0;width:100%}
  .toolbar select{flex:1 1 45%;min-width:0}
}
@media(max-width:720px){
  .pic-table{min-width:0;table-layout:auto}
  .app-head{padding:8px 14px}
  .logo-square{width:38px;height:38px;}
  .logo-square > span:first-child{font-size:12px}
  /* logo-square > span :first-child géré au-dessus */
  .majin-block{font-size:11px;padding:4px 9px}
  .head-sub{display:none}
  .tabs{top:56px}
  .tab{padding:12px 14px;font-size:12px}

  /* Le tableau devient une pile de fiches */
  .table-scroll{border:0;background:transparent;overflow:visible}
  .pic-table,.pic-table tbody,.pic-table tr,.pic-table td{display:block;width:100%}
  .pic-table thead{display:none}
  .pic-table tbody tr{
    background:var(--o-white);border:2px solid var(--o-black);margin-bottom:10px;
    position:relative;padding:6px 6px 6px 14px;
  }
  .pic-table tbody tr:hover{background:var(--o-white)}
  .pic-table td{
    border:0;border-bottom:1px solid var(--line);height:auto;
    display:flex;align-items:flex-start;gap:10px;text-align:left;padding:4px 0;
  }
  .pic-table td:last-child{border-bottom:0}
  .pic-table td::before{
    content:attr(data-label);flex:0 0 96px;
    font-size:10px;text-transform:uppercase;letter-spacing:.08em;
    font-weight:700;color:var(--o-grey-2);padding-top:9px;
  }
  .cell{justify-content:flex-start;text-align:left;min-height:34px;padding:6px 4px}
  .cell-text{text-align:left;-webkit-line-clamp:6}
  .cell-editor{text-align:left}
  td.col-status{position:absolute;left:0;top:0;bottom:0;width:8px;padding:0}
  td.col-status::before{display:none}
  td.col-check,td.col-tools{display:inline-flex;width:auto;border:0}
  td.col-check::before,td.col-tools::before{display:none}
  td.col-check{padding:6px 0 8px}
  td.col-tools{position:absolute;top:6px;right:6px;padding:0}
  .rex-meta{margin-left:0;width:100%}
  .sheet{border-left:0;border-top:6px solid var(--o-orange)}
  .sheet-backdrop{align-items:flex-end}
  .sheet{height:92%}
  @keyframes sheetIn{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
}

/* Mode compact */
body.is-dense{--row-h:34px;font-size:14px}
body.is-dense .pic-table{font-size:12.5px}

/* Mouvement réduit */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ============ Impression — une seule page ============ */
#print-area{display:none}
@media print{
  @page{size:A4 landscape;margin:8mm}
  body{background:#fff;font-size:9pt}
  .app-head,.tabs,.app-main,.toast-stack,.sheet-backdrop,.splash{display:none !important}
  #print-area{
    display:block;
    transform:scale(var(--print-scale,1));
    transform-origin:top left;
    width:calc(100% / var(--print-scale,1));
  }
  .p-head{
    display:flex;align-items:stretch;justify-content:space-between;
    border:1.5pt solid #000;border-bottom:0;
  }
  .p-title{
    flex:1;text-align:center;font-size:15pt;font-weight:700;
    text-transform:uppercase;padding:5pt 8pt;letter-spacing:.02em;
  }
  .p-majin{
    background:#000;color:#fff;font-style:italic;font-weight:700;
    font-size:10pt;padding:5pt 10pt;display:flex;align-items:center;
  }
  .p-sub{
    border:1.5pt solid #000;border-top:0;border-bottom:0;
    padding:3pt 8pt;font-size:7.5pt;display:flex;justify-content:space-between;
    color:#333;
  }
  .p-table{width:100%;border-collapse:collapse;table-layout:fixed}
  .p-table th,.p-table td{
    border:.75pt solid #000;padding:3pt 4pt;text-align:center;
    vertical-align:middle;overflow-wrap:anywhere;
  }
  .p-table th{font-size:8.5pt;font-weight:700;background:#fff}
  .p-table td{font-size:8pt}
  .p-table td.p-sujet{font-weight:700}
  .p-table tr{page-break-inside:avoid}
  .p-empty-row td{height:14pt}
  .p-foot{margin-top:4pt;font-size:7pt;color:#555;display:flex;justify-content:space-between}
}

/* ============================================================
   Ouverture animée (10 s)
   ============================================================ */
body.intro-open{overflow:hidden}
.intro{
  position:fixed;inset:0;z-index:300;background:var(--o-black);
  display:grid;place-items:center;overflow:hidden;
}
.intro.is-closing{animation:introOut .42s cubic-bezier(.7,0,.2,1) forwards}
@keyframes introOut{to{opacity:0;visibility:hidden}}
.intro-stage{position:relative;display:grid;place-items:center;width:min(92vw,720px);height:min(70vh,460px)}

/* — Phase 1 : les neuf carrés — */
.intro-grid{position:absolute;width:0;height:0}
.intro-sq{
  position:absolute;width:30px;height:30px;background:var(--o-orange);
  left:calc(var(--gx) - 15px);top:calc(var(--gy) - 15px);
  transform:scale(0) rotate(-45deg);opacity:0;
  animation:sqLife 2.4s cubic-bezier(.2,1.2,.3,1) both;
}
.intro-sq.is-white{background:var(--o-white)}
@keyframes sqLife{
  0%{transform:scale(0) rotate(-45deg);opacity:0}
  14%{transform:scale(1) rotate(0);opacity:1}
  52%{transform:scale(1) rotate(0);opacity:1}
  100%{
    transform:translate(calc(var(--gx) * -1),calc(var(--gy) * -1)) scale(.18) rotate(90deg);
    opacity:0;
  }
}

/* — Phase 2 : le bloc PIC — */
.intro-mark{
  position:absolute;display:grid;place-items:center;
  transform:translateY(-38px);opacity:0;
  animation:markIn .9s cubic-bezier(.2,1.5,.35,1) 2.2s forwards,
            markUp .9s cubic-bezier(.6,0,.3,1) 4.9s forwards;
}
@keyframes markIn{from{opacity:0;transform:translateY(-38px) scale(.2)}to{opacity:1;transform:translateY(-38px) scale(1)}}
@keyframes markUp{to{transform:translateY(-118px) scale(.68)}}
.intro-mark-sq{width:132px;height:132px;background:var(--o-orange);display:block}
.intro-mark-txt{
  position:absolute;color:var(--o-white);font-weight:700;
  font-size:38px;letter-spacing:.06em;
  opacity:0;animation:fadeUp .5s ease 2.75s forwards;
}

/* — Phase 3 : le titre — */
.intro-title{
  position:absolute;margin:0;transform:translateY(46px);
  font-size:clamp(15px,3.1vw,27px);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--o-white);text-align:center;
  white-space:nowrap;overflow:hidden;
}
.intro-title span{
  display:inline-block;
  clip-path:inset(0 100% 0 0);
  animation:titleWipe 1.1s cubic-bezier(.7,0,.2,1) 3.6s forwards;
}
@keyframes titleWipe{to{clip-path:inset(0 0 0 0)}}

/* — Phase 4 : les trois mots — */
.intro-words{
  position:absolute;list-style:none;margin:0;padding:0;
  display:flex;gap:10px;transform:translateY(104px);flex-wrap:wrap;justify-content:center;
}
.intro-words li{
  border:2px solid var(--o-white);color:var(--o-white);
  padding:6px 15px;font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;white-space:nowrap;
  opacity:0;transform:translateY(14px);
  animation:wordIn .55s cubic-bezier(.2,1.3,.3,1) var(--d) forwards,
            wordTint .5s ease calc(var(--d) + 3.4s) forwards;
}
@keyframes wordIn{to{opacity:1;transform:translateY(0)}}
@keyframes wordTint{to{background:var(--o-orange);border-color:var(--o-orange)}}

/* — Phase 5 : le tampon — */
.intro-majin{
  position:absolute;transform:translateY(168px) scale(1.8);
  background:var(--o-white);color:var(--o-black);
  font-style:italic;font-weight:700;font-size:17px;padding:7px 16px;
  opacity:0;animation:stampIn .42s cubic-bezier(.3,1.6,.4,1) 7s forwards;
}
@keyframes stampIn{to{opacity:1;transform:translateY(168px) scale(1)}}

/* — Phase 6 : le balayage final — */
.intro-wipe{
  position:absolute;inset:0;background:var(--o-orange);
  transform:scaleX(0);transform-origin:left;
  animation:wipeThrough 1.3s cubic-bezier(.75,0,.2,1) 8.6s forwards;
}
@keyframes wipeThrough{
  0%{transform:scaleX(0);transform-origin:left}
  48%{transform:scaleX(1);transform-origin:left}
  52%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}
}

/* — Habillage — */
.intro-progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.15)}
.intro-progress i{
  display:block;height:100%;width:0;background:var(--o-orange);
  animation:introBar 10s linear forwards;
}
@keyframes introBar{to{width:100%}}
.intro-skip,.intro-sound{
  position:absolute;bottom:26px;color:var(--o-white);
  border:2px solid rgba(255,255,255,.4);background:transparent;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  padding:8px 16px;transition:background .2s ease,color .2s ease,border-color .2s ease;
  opacity:0;animation:fadeUp .5s ease .7s forwards;
}
.intro-skip{right:26px}
.intro-sound{left:26px}
.intro-skip:hover,.intro-sound:hover{background:var(--o-white);color:var(--o-black);border-color:var(--o-white)}

.intro.is-reduced .intro-sq,
.intro.is-reduced .intro-wipe,
.intro.is-reduced .intro-progress i{animation:none;opacity:0}
.intro.is-reduced .intro-mark,
.intro.is-reduced .intro-title span,
.intro.is-reduced .intro-words li,
.intro.is-reduced .intro-majin{animation:none;opacity:1;clip-path:none;transform:none}
.intro.is-reduced .intro-stage{gap:16px;display:flex;flex-direction:column;justify-content:center}

@media(max-width:720px){
  .intro-mark-sq{width:96px;height:96px}
  .intro-mark-txt{font-size:28px}
  .intro-title{white-space:normal;line-height:1.3;padding:0 18px;transform:translateY(56px)}
  .intro-words{transform:translateY(132px);padding:0 16px}
  .intro-majin{transform:translateY(200px) scale(1.8)}
  @keyframes stampIn{to{opacity:1;transform:translateY(200px) scale(1)}}
  .intro-skip{right:16px;bottom:20px}
  .intro-sound{left:16px;bottom:20px}
}

/* ============================================================
   Synchronisation — voyant d'état
   ============================================================ */
.sync-dot{
  width:16px;height:16px;border:2px solid var(--o-white);cursor:pointer;
  background:transparent;flex:0 0 auto;margin-right:4px;
  transition:background .25s ease,border-color .25s ease;
}
.sync-dot.is-off{opacity:.35}
.sync-dot.is-ok{background:var(--o-green);border-color:var(--o-green)}
.sync-dot.is-pending{background:var(--o-yellow);border-color:var(--o-yellow)}
.sync-dot.is-running{background:var(--o-orange);border-color:var(--o-orange);animation:syncPulse 1s ease-in-out infinite}
.sync-dot.is-offline{background:var(--o-grey-2);border-color:var(--o-grey-2)}
.sync-dot.is-error{background:var(--o-orange);border-color:var(--o-white);animation:syncPulse .6s ease-in-out infinite}
@keyframes syncPulse{0%,100%{transform:scale(1)}50%{transform:scale(.62)}}

.cfg-sub{
  margin:6px 0 0;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--o-grey-3);font-weight:700;
}
#sync-form,#sync-active{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
#cfg-space{border:2px solid var(--line);padding:8px 10px;background:var(--o-white);min-width:0;flex:1}
#cfg-space:focus{border-color:var(--o-orange);outline:none}
#sync-fingerprint{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  background:var(--o-yellow-l);padding:1px 6px;
}

/* ============================================================
   Synthèse REX
   ============================================================ */
.synth-backdrop{justify-content:center;align-items:center;padding:clamp(0px,3vw,32px)}
.synth{
  background:var(--o-white);width:min(1120px,100%);height:min(94vh,940px);
  display:flex;flex-direction:column;border-top:6px solid var(--o-orange);
  animation:sheetIn .35s cubic-bezier(.2,.9,.3,1);
}
.synth-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.synth-actions select{border:2px solid var(--line);padding:8px 10px;background:var(--o-white)}
.synth-actions .icon-btn{color:var(--o-black)}
.synth-actions .icon-btn:hover{background:var(--o-black);color:var(--o-white)}
.synth-body{flex:1;overflow-y:auto;padding:20px}
.synth-empty{color:var(--o-grey-2);text-align:center;padding:60px 20px;margin:0}

.synth-stats{
  display:grid;gap:10px;margin-bottom:22px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.synth-stat{border:2px solid var(--o-black);padding:12px 14px;display:grid;gap:2px}
.synth-stat strong{font-size:26px;line-height:1;font-variant-numeric:tabular-nums}
.synth-stat span{
  font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--o-grey-3);font-weight:700;
}
.synth-group{margin-bottom:22px;break-inside:avoid}
.synth-group-title{
  margin:0 0 10px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;
  padding-bottom:6px;border-bottom:2px solid var(--o-black);
  display:flex;align-items:baseline;gap:10px;
}
.synth-group-n{
  margin-left:auto;font-size:10px;letter-spacing:.08em;
  background:var(--o-blue-l);color:var(--o-blue-d);padding:2px 8px;
}
.synth-item{
  border-left:4px solid var(--o-green);padding:8px 0 8px 12px;margin-bottom:10px;
}
.synth-item.is-void{border-left-color:var(--o-grey-1)}
.synth-item-head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.synth-when{
  margin-left:auto;font-size:11px;color:var(--o-grey-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.synth-obj{margin:3px 0 0;font-size:12px;color:var(--o-grey-3)}
.synth-rex{margin:5px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.synth-item.is-void .synth-rex{color:var(--o-grey-2);font-style:italic}

@media(max-width:720px){
  .synth{height:100%;border-top:0}
  .synth-backdrop{padding:0;align-items:stretch}
  .synth-actions{width:100%}
  .synth-actions select{flex:1}
}

/* ============================================================
   Impression de la synthèse
   ============================================================ */
@media print{
  .p-synth{column-count:3;column-gap:7mm;margin-top:3pt}
  .p-group{break-inside:avoid;margin-bottom:6pt}
  .p-group h3{
    margin:0 0 3pt;font-size:8.5pt;text-transform:uppercase;letter-spacing:.05em;
    border-bottom:1pt solid #000;padding-bottom:2pt;
  }
  .p-group h3 em{font-style:normal;float:right;font-weight:400;color:#555}
  .p-item{break-inside:avoid;border-left:2pt solid #000;padding-left:5pt;margin-bottom:5pt}
  .p-item b{font-size:8pt;display:block}
  .p-item i{font-style:normal;font-size:6.5pt;color:#555;display:block;margin-bottom:1pt}
  .p-item p{margin:0;font-size:7.5pt;line-height:1.3}
}

/* ============================================================
   Notes en attente
   ============================================================ */
.notes-box{
  margin-top:18px;background:var(--o-white);
  border:2px solid var(--o-black);border-top-width:8px;border-top-color:var(--o-yellow);
  padding:16px 18px;
}
.notes-head{margin-bottom:12px}
.notes-head h2{
  margin:0;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  display:flex;align-items:center;gap:9px;
}
.notes-count{
  background:var(--o-yellow);color:var(--o-black);
  font-size:11px;padding:1px 8px;font-variant-numeric:tabular-nums;
}
.notes-head p{margin:4px 0 0;font-size:12px;color:var(--o-grey-2)}

.notes-add{display:flex;gap:8px;margin-bottom:12px}
#note-input{
  flex:1;min-width:0;border:2px solid var(--line);padding:9px 12px;background:var(--o-white);
  transition:border-color .18s ease;
}
#note-input:focus{border-color:var(--o-yellow-d);outline:none}

.notes-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.note{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-left:5px solid var(--o-yellow);
  padding:8px 10px;background:var(--o-white);
  animation:rowIn .3s cubic-bezier(.2,.8,.3,1) both;
  transition:border-left-color .18s ease,background .18s ease;
}
.note:hover{background:var(--o-yellow-l);border-left-color:var(--o-yellow-d)}
.note-tick{width:8px;height:8px;background:var(--o-yellow-d);flex:0 0 auto}
.note-text{
  flex:1;min-width:0;cursor:text;overflow-wrap:anywhere;
  padding:2px 4px;box-shadow:inset 0 0 0 0 var(--o-yellow);
  transition:box-shadow .15s ease;
}
.note-text:hover{box-shadow:inset 0 0 0 2px var(--o-yellow-d)}
.note-editor{
  flex:1;min-width:0;border:2px solid var(--o-yellow-d);padding:4px 6px;
  background:var(--o-white);outline:none;
}
.note-acts{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.note .mini-btn{border-color:var(--o-black)}
.note .mini-btn:hover{background:var(--o-orange);border-color:var(--o-orange);color:var(--o-white)}
.note-x{
  width:26px;height:26px;display:grid;place-items:center;
  color:var(--o-grey-2);font-size:13px;transition:.18s ease;
}
.note-x:hover{background:var(--o-black);color:var(--o-white)}
.notes-empty{margin:0;font-size:13px;color:var(--o-grey-2);padding:6px 2px}

@media(max-width:720px){
  .notes-add{flex-wrap:wrap}
  .notes-add .primary-btn{width:100%}
  .note{flex-wrap:wrap}
  .note-acts{width:100%;justify-content:flex-end}
}

/* Impression : les notes en attente closent la page */
@media print{
  .p-notes{
    border:.75pt solid #000;border-top:0;padding:4pt 6pt;
    font-size:7.5pt;display:flex;flex-wrap:wrap;gap:4pt 10pt;align-items:baseline;
  }
  .p-notes b{
    font-size:7pt;text-transform:uppercase;letter-spacing:.06em;
    border-right:.75pt solid #000;padding-right:8pt;margin-right:2pt;
  }
  .p-notes span{padding-right:6pt}
  .p-notes span::before{content:"\25AA\00A0"}
}

/* ============================================================
   Statuts personnalisés
   ============================================================ */
.st-attente  .status-rail{ background:var(--o-yellow-d) }
.st-bloquee  .status-rail{ background:var(--o-purple-d) }
.st-deleguee .status-rail{ background:var(--o-blue-d)   }
.st-encours  .status-rail{ background:var(--o-orange)   }

.statut-badge{
  display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;padding:1px 6px;margin-top:3px;color:var(--o-white);
}
.badge-en-attente{ background:var(--o-yellow-d)  }
.badge-bloquee   { background:var(--o-purple-d)  }
.badge-deleguee  { background:var(--o-blue-d)    }

/* ============================================================
   Tags
   ============================================================ */
.sujet-wrap{display:grid;gap:3px;text-align:center}
.tag-row{display:flex;flex-wrap:wrap;gap:3px;justify-content:center}
.tag-chip{
  font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  background:var(--o-blue-l);color:var(--o-blue-d);padding:1px 6px;
}

/* ============================================================
   Score d'étoiles
   ============================================================ */
.score-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.star-btn{
  font-size:20px;color:var(--o-grey-1);background:none;border:0;
  cursor:pointer;transition:color .15s ease,transform .15s ease;padding:0 2px;
}
.star-btn:hover,.star-btn.is-on{color:var(--o-yellow-d)}
.star-btn:hover{transform:scale(1.3)}
.score-note{font-size:12px;color:var(--o-grey-2);margin-left:6px}
.kb-score{font-size:11px;color:var(--o-yellow-d);display:block;margin-top:2px}

/* ============================================================
   Récurrence, liens, fil de commentaires
   ============================================================ */
#f-statut,#f-rec,.link-add-sel{
  border:2px solid var(--line);padding:8px 10px;background:var(--o-white);
  width:100%;cursor:pointer;
}
#f-statut:focus,#f-rec:focus,.link-add-sel:focus{border-color:var(--o-orange);outline:none}
.link-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:5px}
.link-item{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:5px 8px}
.link-item span{flex:1;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.comment-fil{display:grid;gap:8px;margin-bottom:10px;max-height:240px;overflow-y:auto}
.comment{border-left:4px solid var(--o-blue);padding:6px 10px;position:relative}
.comment-when{
  display:block;font-size:10px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--o-grey-2);font-weight:700;margin-bottom:2px;
}
.comment-text{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px}
.comment .note-x{position:absolute;top:4px;right:4px}
.comment-add{display:grid;gap:6px}
.comment-add textarea{
  border:2px solid var(--line);padding:8px 10px;resize:vertical;
  transition:border-color .18s ease;
}
.comment-add textarea:focus{border-color:var(--o-blue);outline:none}

.sheet-divider{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  font-weight:700;color:var(--o-grey-2);padding:6px 0 2px;
  border-bottom:2px solid var(--o-black);margin:4px 0 8px;
}

/* ============================================================
   Kanban
   ============================================================ */
body.is-kanban .table-scroll,body.is-kanban .hint{display:none}
body.is-kanban #kanban-board{display:grid!important}
.kanban-wrap{
  display:none;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;margin-top:4px;
}
.kb-col{display:flex;flex-direction:column;gap:0;min-height:320px}
.kb-head{
  display:flex;align-items:center;gap:8px;padding:10px 12px;
  background:var(--o-black);color:var(--o-white);
}
.kb-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;flex:1}
.kb-n{
  background:var(--o-orange);color:var(--o-white);
  font-size:11px;font-weight:700;padding:1px 8px;
}
.kb-drop{
  flex:1;border:2px solid var(--o-black);border-top:0;
  padding:8px;display:grid;gap:8px;align-content:start;
  transition:background .18s ease;
}
.kb-over{background:var(--o-yellow-l)}
.kb-card{
  background:var(--o-white);border:1px solid var(--line);border-left:5px solid var(--o-orange);
  padding:10px 12px;cursor:pointer;display:grid;gap:4px;
  transition:box-shadow .18s ease,transform .18s ease;
  animation:rowIn .3s cubic-bezier(.2,.8,.3,1) both;
}
.kb-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.kb-card.is-dragging{opacity:.5;transform:rotate(1.5deg)}
.kb-sujet{margin:0;font-weight:700;font-size:14px;overflow-wrap:anywhere}
.chip-late{background:var(--o-orange);color:var(--o-white);padding:2px 8px;font-size:10px;font-weight:700}
.chip-today{background:var(--o-yellow-d);color:var(--o-white);padding:2px 8px;font-size:10px;font-weight:700}

@media(max-width:720px){
  .kanban-wrap{grid-template-columns:1fr}
  .kb-col{min-height:0}
}

/* ============================================================
   Export PDF tableau de bord
   ============================================================ */
@media print{
  .p-kpi-row{display:flex;gap:8pt;margin:8pt 0}
  .p-kpi{flex:1;border:1pt solid #000;padding:8pt;text-align:center}
  .p-kpi strong{display:block;font-size:18pt;font-weight:700}
  .p-kpi span{font-size:7pt;text-transform:uppercase;letter-spacing:.08em;color:#555}
}

/* ============================================================
   Partage lecture seule
   ============================================================ */
.share-loading{
  display:grid;place-items:center;height:80vh;font-size:16px;
  color:var(--o-grey-2);text-transform:uppercase;letter-spacing:.08em;
}
body.is-share .app-head{border-bottom:4px solid var(--o-yellow)}

/* ============================================================
   Top des collaborations
   ============================================================ */
.top-row{
  display:flex;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);
}
.top-row:last-child{border-bottom:0}
.top-rank{
  flex:0 0 26px;text-align:center;font-size:16px;font-weight:700;
  color:var(--o-grey-1);font-variant-numeric:tabular-nums;
}
.top-row.is-podium .top-rank{color:var(--o-orange);font-size:19px}
.top-mid{flex:1;min-width:0;display:grid;gap:4px}
.top-hd{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.top-name{font-weight:700;font-size:14px}
.top-meta{
  margin-left:auto;font-size:11px;color:var(--o-grey-2);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.top-track{height:14px;background:var(--o-grey-1);display:flex}
.top-fill{display:block;height:100%;width:0;transition:width .8s cubic-bezier(.2,.8,.3,1)}
.top-fill.f-open{background:var(--o-orange)}
.top-fill.f-done{background:var(--o-green)}
.top-total{
  flex:0 0 auto;font-size:20px;font-weight:700;
  font-variant-numeric:tabular-nums;min-width:34px;text-align:right;
}
@media(max-width:720px){
  .top-meta{margin-left:0;width:100%;white-space:normal}
  .top-total{font-size:17px}
}