/* ==================================================================
   Suivi de coordination — Mégafun
   Reprend le mockup : barre latérale blanche, élément actif en rouge
   plein, cartes blanches arrondies, pastilles de statut, icônes fines.
   ================================================================== */

:root{
  --rouge:#8b1815;
  --rouge-vif:#a81e19;
  --rouge-clair:#e84a3e;
  --rouge-pale:#fdf2f1;
  --rouge-bord:#f2d7d5;

  --encre:#1c1a19;
  --encre-2:#45403c;
  --gris:#7a736d;
  --gris-pale:#a8a29c;
  --trait:#ececea;
  --trait-fin:#f4f3f1;

  --fond:#f6f5f4;
  --blanc:#fff;

  --vert:#1a7f45;--vert-pale:#e9f6ee;--vert-bord:#cbe8d6;
  --ambre:#a06a10;--ambre-pale:#fdf4e5;--ambre-bord:#f2dfc0;
  --bleu:#1f5fb4;--bleu-pale:#eef3fb;--bleu-bord:#d6e2f5;
  --mauve:#6b3fa0;--mauve-pale:#f3eefa;
  --rose:#a83c68;--rose-pale:#fbeef3;
  --sarcelle:#0f7276;--sarcelle-pale:#e8f5f5;

  --r:12px;--r-sm:9px;--r-lg:16px;--r-pill:999px;
  --ombre:0 1px 2px rgba(28,26,25,.04);
  --ombre-md:0 1px 3px rgba(28,26,25,.06), 0 6px 16px rgba(28,26,25,.05);
  --ombre-lg:0 10px 34px rgba(28,26,25,.13);
  --f:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fm:ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--f);font-size:15px;line-height:1.5;color:var(--encre);background:var(--fond);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:var(--rouge-vif);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.016em}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--rouge-vif);outline-offset:2px;border-radius:5px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.ic{width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:14px;height:14px;flex-basis:14px;stroke-width:1.7}
.ic-lg{width:18px;height:18px;flex-basis:18px}

/* ---- ossature ----------------------------------------------------- */
.shell{display:flex;min-height:100vh}
.side{width:232px;flex:0 0 232px;background:var(--blanc);border-right:1px solid var(--trait);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:block;padding:1.4rem 1.15rem 1.3rem}
.brand img{width:132px;max-width:100%;height:auto;display:block}
.brand-fallback{font-weight:700;color:var(--rouge);letter-spacing:.03em}
.brand img+.brand-fallback{display:none}
.brand:hover{text-decoration:none}

.nav{padding:0 .7rem;flex:1;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:.72rem;padding:.58rem .7rem;border-radius:var(--r-sm);
  color:var(--encre-2);font-size:.875rem;font-weight:500;margin-bottom:2px;
  transition:background .13s,color .13s}
.nav-item:hover{background:var(--trait-fin);text-decoration:none}
.nav-item.is-on{background:var(--rouge);color:#fff}
.nav-item .ic{color:var(--gris-pale)}
.nav-item:hover .ic{color:var(--gris)}
.nav-item.is-on .ic{color:#fff}
.nav-sep{height:1px;background:var(--trait);margin:.75rem .7rem}

.side-foot{padding:1rem 1.15rem 1.15rem;border-top:1px solid var(--trait)}
.me{display:flex;align-items:center;gap:.65rem;margin-bottom:.6rem}
.me-txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.me-txt strong{font-size:.845rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me-txt small{font-size:.735rem;color:var(--gris-pale)}
.signout{font-size:.78rem;color:var(--gris-pale)}
.signout:hover{color:var(--rouge-vif)}

.main{flex:1;min-width:0;padding:1.55rem 1.9rem 4rem;max-width:1760px}

/* ---- pastilles d'initiales ---------------------------------------- */
.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  font-size:.685rem;font-weight:700;letter-spacing:.01em;flex:0 0 30px;
  background:var(--rouge-pale);color:var(--rouge)}
.avatar-sm{width:24px;height:24px;flex-basis:24px;font-size:.62rem}
.av-0{background:var(--mauve-pale);color:var(--mauve)}
.av-1{background:var(--bleu-pale);color:var(--bleu)}
.av-2{background:var(--vert-pale);color:var(--vert)}
.av-3{background:var(--ambre-pale);color:var(--ambre)}
.av-4{background:var(--rose-pale);color:var(--rose)}
.av-5{background:var(--sarcelle-pale);color:var(--sarcelle)}

/* ---- barre de titre ------------------------------------------------ */
.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  margin-bottom:1.4rem;flex-wrap:wrap}
.topbar h1{font-size:1.32rem;letter-spacing:-.025em;line-height:1.25}
.topbar-sub{margin:.22rem 0 0;color:var(--gris-pale);font-size:.83rem;display:flex;
  align-items:center;gap:.45rem;flex-wrap:wrap}
.topbar-back{display:flex;gap:.75rem;align-items:center;min-width:0}
.back{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--gris);
  flex:0 0 30px;font-size:1.05rem}
.back:hover{text-decoration:none;background:var(--trait-fin);color:var(--encre)}
.topbar-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}

.search{display:flex;gap:.45rem;align-items:center}
.search .search-box{position:relative;display:flex;align-items:center}
.search .search-box .ic{position:absolute;left:.7rem;color:var(--gris-pale);pointer-events:none}
.search input{height:37px;min-width:258px;padding:0 .8rem 0 2.15rem;border:1px solid var(--trait);
  border-radius:var(--r-pill);font:inherit;font-size:.845rem;background:var(--blanc);color:var(--encre)}
.search select{height:37px;padding:0 2rem 0 .85rem;border:1px solid var(--trait);
  border-radius:var(--r-pill);font:inherit;font-size:.845rem;background-color:var(--blanc);color:var(--encre-2)}

/* ---- boutons ------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.42rem;height:37px;
  padding:0 1rem;border:1px solid var(--trait);border-radius:var(--r-sm);background:var(--blanc);
  color:var(--encre-2);font:inherit;font-size:.85rem;font-weight:500;cursor:pointer;
  transition:background .13s,border-color .13s,box-shadow .13s}
.btn:hover{background:var(--trait-fin);text-decoration:none}
.btn .ic{color:currentColor}
.btn-primary{background:var(--rouge);border-color:var(--rouge);color:#fff;
  box-shadow:0 1px 2px rgba(139,24,21,.2)}
.btn-primary:hover{background:#74120f;border-color:#74120f}
.btn[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
.btn-sm{height:29px;padding:0 .6rem;font-size:.785rem;border-radius:7px}
.btn-quiet{border-color:transparent;background:transparent;color:var(--gris)}
.btn-quiet:hover{background:var(--trait-fin);color:var(--encre)}
.btn-danger{border-color:var(--rouge-bord);color:var(--rouge-vif)}
.btn-danger:hover{background:var(--rouge-pale);border-color:var(--rouge-vif)}

/* ---- filtres ------------------------------------------------------- */
.chips{display:flex;gap:.42rem;margin-bottom:1.2rem;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:.45rem;height:32px;padding:0 .85rem;
  border-radius:var(--r-pill);border:1px solid var(--trait);background:var(--blanc);
  color:var(--gris);font-size:.825rem;font-weight:500}
.chip span{font-weight:700;color:var(--encre);font-variant-numeric:tabular-nums}
.chip:hover{text-decoration:none;border-color:var(--gris-pale)}
.chip.is-on{background:var(--encre);border-color:var(--encre);color:#fff}
.chip.is-on span{color:#fff}
.chip-alert span{color:var(--rouge-vif)}
.chip-alert.is-on{background:var(--rouge);border-color:var(--rouge)}
.chip-alert.is-on span{color:#fff}

/* ---- tableau ------------------------------------------------------- */
.board{display:grid;grid-template-columns:repeat(5,minmax(238px,1fr));gap:.85rem;align-items:start}
.col{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-lg);
  display:flex;flex-direction:column;min-height:160px;box-shadow:var(--ombre)}
.col-head{display:flex;align-items:center;gap:.55rem;padding:.85rem .9rem .7rem}
.col-mark{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;flex:0 0 22px;
  background:var(--trait-fin);color:var(--gris)}
.col-mark .ic{width:13px;height:13px;flex-basis:13px;stroke-width:2}
.col[data-stage=nouveau] .col-mark{background:var(--bleu-pale);color:var(--bleu)}
.col[data-stage=attente] .col-mark{background:var(--trait-fin);color:var(--gris)}
.col[data-stage=a_planifier] .col-mark{background:var(--rouge-pale);color:var(--rouge-vif)}
.col[data-stage=planifiee] .col-mark{background:var(--ambre-pale);color:var(--ambre)}
.col[data-stage=pret] .col-mark{background:var(--vert-pale);color:var(--vert)}
.col-head h2{font-size:.78rem;font-weight:600;flex:1;min-width:0;line-height:1.25}
.count{font-size:.72rem;font-weight:600;color:var(--gris);background:var(--trait-fin);
  border-radius:var(--r-pill);padding:.08rem .45rem;min-width:21px;text-align:center;
  font-variant-numeric:tabular-nums}
.col-body{padding:0 .6rem .6rem;display:flex;flex-direction:column;gap:.55rem;min-height:64px;
  border-radius:var(--r-lg);transition:background .12s}
.col-body.is-over{background:var(--rouge-pale);box-shadow:inset 0 0 0 2px var(--rouge-bord)}
.col-empty{margin:.15rem .3rem .4rem;font-size:.78rem;color:var(--gris-pale);line-height:1.45}

.card{border:1px solid var(--trait);border-radius:var(--r);background:var(--blanc);
  position:relative;overflow:hidden;transition:box-shadow .15s,border-color .15s,transform .1s}
.card:hover{box-shadow:var(--ombre-md);border-color:#ddd9d5;transform:translateY(-1px)}
.card.is-dragging{opacity:.35;transform:none}
.card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.card.has-followup::before{background:var(--rouge-clair)}
.card-link{display:block;padding:.8rem .85rem;color:var(--encre)}
.card-link:hover{text-decoration:none}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:.45rem;margin-bottom:.5rem}
.card h3{font-size:.885rem;font-weight:600;line-height:1.35;margin:0}
.numero{margin:.2rem 0 0;font-family:var(--fm);font-size:.695rem;letter-spacing:.05em;color:var(--gris-pale)}
.card-meta{margin:.55rem 0 0;display:flex;flex-direction:column;gap:.28rem}
.card-meta span{display:flex;align-items:center;gap:.45rem;font-size:.775rem;color:var(--gris);
  line-height:1.35;min-width:0}
.card-meta .ic{color:var(--gris-pale)}
.card-meta em{font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.7rem}

.pill{display:inline-flex;align-items:center;font-size:.665rem;font-weight:600;letter-spacing:.015em;
  padding:.16rem .5rem;border-radius:var(--r-pill);background:var(--trait-fin);color:var(--gris);white-space:nowrap}
.pill-mariage{background:var(--mauve-pale);color:var(--mauve)}
.pill-corporatif{background:var(--bleu-pale);color:var(--bleu)}
.pill-bal{background:var(--ambre-pale);color:var(--ambre)}
.pill-anniversaire{background:var(--vert-pale);color:var(--vert)}

.cd{font-size:.715rem;font-weight:600;white-space:nowrap;color:var(--gris-pale);font-variant-numeric:tabular-nums}
.cd-now{color:var(--rouge-vif)}
.cd-soon{color:var(--ambre)}
.cd-lg{display:inline-flex;align-items:center;height:37px;padding:0 .85rem;font-size:.82rem;
  background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-pill)}

.card-action{margin:.65rem 0 0;font-size:.775rem;color:var(--gris);display:flex;
  justify-content:space-between;gap:.5rem;padding-top:.55rem;border-top:1px solid var(--trait-fin)}
.card-action span{color:var(--gris-pale);white-space:nowrap;font-variant-numeric:tabular-nums}
.card-action.is-late,.card-action.is-late span{color:var(--rouge-vif);font-weight:600}
.card-followup{margin:.5rem 0 0;font-size:.755rem;color:var(--rouge-vif);line-height:1.4}
.badges{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.6rem}
.badge{font-size:.68rem;font-weight:600;padding:.15rem .48rem;border-radius:var(--r-pill);
  background:var(--trait-fin);color:var(--gris)}
.badge.ok{background:var(--vert-pale);color:var(--vert)}
.badge.wait{background:var(--ambre-pale);color:var(--ambre)}

/* ---- pastilles de statut ------------------------------------------- */
.tag{display:inline-flex;align-items:center;gap:.34rem;font-size:.715rem;font-weight:600;
  padding:.2rem .58rem;border-radius:var(--r-pill);background:var(--trait-fin);
  color:var(--gris);white-space:nowrap}
.tag::before{content:"";width:5.5px;height:5.5px;border-radius:50%;background:currentColor;
  flex:0 0 5.5px;opacity:.85}
.tag.ok,.tag-confirme{background:var(--vert-pale);color:var(--vert)}
.tag.wait,.tag-demande_envoyee{background:var(--ambre-pale);color:var(--ambre)}
.tag-a_reserver{background:var(--rouge-pale);color:var(--rouge-vif)}
.tag-annule{color:var(--gris-pale);text-decoration:line-through}
.tag-annule::before,.tag-non_requis::before{opacity:.4}
.tag-plat::before{display:none}

.tabs{display:flex;gap:.15rem;border-bottom:1px solid var(--trait);margin-bottom:1.15rem;
  overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;display:inline-flex;align-items:center;gap:.4rem;height:38px;padding:0 .85rem;
  background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;
  font:inherit;font-size:.865rem;font-weight:500;color:var(--gris);white-space:nowrap;
  transition:color .13s,border-color .13s}
.tab:hover{color:var(--encre)}
.tab.is-on{color:var(--rouge-vif);border-bottom-color:var(--rouge)}
.tab .pastille{font-size:.68rem;font-weight:700;background:var(--trait-fin);color:var(--gris);
  border-radius:var(--r-pill);padding:.04rem .38rem;min-width:18px;text-align:center}
.tab.is-on .pastille{background:var(--rouge-pale);color:var(--rouge-vif)}
.js-tabs .onglet[hidden]{display:none}

.stepper{display:flex;align-items:center;gap:.4rem;list-style:none;margin:0 0 1.35rem;padding:0;
  overflow-x:auto;scrollbar-width:none}
.stepper::-webkit-scrollbar{display:none}
.stepper li{display:flex;align-items:center;gap:.55rem;font-size:.85rem;color:var(--gris-pale);
  white-space:nowrap;font-weight:500}
.stepper li+li::before{content:"";width:26px;height:1px;background:var(--trait);margin-right:.4rem;flex:0 0 26px}
.stepper .num{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;flex:0 0 25px;
  border:1px solid var(--trait);background:var(--blanc);font-size:.76rem;font-weight:600;color:var(--gris-pale)}
.stepper li.is-on{color:var(--encre)}
.stepper li.is-on .num{background:var(--rouge);border-color:var(--rouge);color:#fff}
.stepper li.is-done{color:var(--encre-2)}
.stepper li.is-done .num{background:var(--vert-pale);border-color:var(--vert-bord);color:var(--vert);
  font-size:0}
.stepper li.is-done .num::after{content:"";width:8px;height:4.5px;border-left:2px solid var(--vert);
  border-bottom:2px solid var(--vert);transform:rotate(-45deg) translate(1px,-1px)}
.js-wizard .etape[hidden]{display:none}

/* ---- fiche ---------------------------------------------------------- */
.detail{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:1rem;align-items:start}
.detail-main,.detail-side{display:flex;flex-direction:column;gap:1rem;min-width:0}
.panel{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-lg);
  padding:1.25rem 1.35rem;box-shadow:var(--ombre)}
.panel>h2{font-size:.905rem;font-weight:600;letter-spacing:-.012em;color:var(--encre);margin-bottom:1.05rem}
.panel h3{font-size:.88rem}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  margin-bottom:1.05rem;flex-wrap:wrap}
.panel-head>h2,.panel-head>h3{margin-bottom:0}
.hint,.sec-note,.field-note{font-size:.79rem;color:var(--gris-pale);line-height:1.5;margin:.6rem 0 0}
.prose{font-size:.875rem;margin:0;line-height:1.6}
.mono{font-family:var(--fm);font-size:.78em;color:var(--gris-pale);letter-spacing:.02em}
.numero-lg{font-family:var(--fm);font-size:.775rem;letter-spacing:.07em;color:var(--encre-2);
  background:var(--trait-fin);border-radius:var(--r-pill);padding:.14rem .55rem}
.numero-vide{font-family:var(--f);letter-spacing:0;color:var(--gris-pale);font-style:italic;background:transparent}
.ko{color:var(--rouge-vif)}
.nowrap{white-space:nowrap}

.timeline{list-style:none;margin:0;padding:0}
.tl{display:flex;align-items:flex-start;gap:.8rem;padding:.45rem 0;position:relative}
.tl+.tl::before{content:"";position:absolute;left:10px;top:-.4rem;height:.85rem;width:2px;
  background:var(--trait);border-radius:2px}
.tl-done+.tl::before{background:var(--vert-bord)}
.tl-dot{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:0 0 22px;
  background:var(--trait-fin);border:1px solid var(--trait);margin-top:.05rem}
.tl-done .tl-dot{background:var(--vert-pale);border-color:var(--vert-bord)}
.tl-done .tl-dot::after{content:"";width:9px;height:5px;border-left:2px solid var(--vert);
  border-bottom:2px solid var(--vert);transform:rotate(-45deg) translate(1px,-1px)}
.tl-now .tl-dot{background:var(--rouge);border-color:var(--rouge);box-shadow:0 0 0 4px var(--rouge-pale)}
.tl-now .tl-dot::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.tl div{flex:1;min-width:0}
.tl strong{font-size:.865rem;font-weight:500;display:block}
.tl-todo strong{color:var(--gris-pale)}
.tl-now strong{font-weight:600;color:var(--rouge-vif)}
.tl small{font-size:.755rem;color:var(--gris-pale);display:block;margin-top:.12rem}
.tl-go{background:none;border:0;color:transparent;font:inherit;font-size:.755rem;cursor:pointer;
  padding:.18rem .4rem;border-radius:6px}
.tl:hover .tl-go{color:var(--gris);background:var(--trait-fin)}
.tl-go:hover{color:var(--rouge-vif)}

.next-action{display:grid;grid-template-columns:1fr 152px auto;gap:.6rem;align-items:end;
  margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--trait-fin)}
.na-f{display:flex;flex-direction:column;gap:.35rem;margin:0}
.na-f>span{font-size:.775rem;color:var(--encre-2);font-weight:500}

.steps{list-style:none;margin:0;padding:0}
.step{display:flex;align-items:center;gap:.7rem;padding:.36rem 0;font-size:.84rem}
.step-dot{width:9px;height:9px;border-radius:50%;background:var(--trait);flex:0 0 9px}
.step-done .step-dot{background:var(--vert)}
.step-now .step-dot{background:var(--rouge);box-shadow:0 0 0 3.5px var(--rouge-pale)}
.step-todo .step-label{color:var(--gris-pale)}
.step-now .step-label{font-weight:600}
.step-label{flex:1;min-width:0}
.step-who{font-size:.7rem;color:var(--gris-pale)}
.step-actions{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.link-row{margin-top:1rem;padding-top:.85rem;border-top:1px solid var(--trait-fin);
  font-size:.785rem;color:var(--gris-pale);display:flex;gap:.85rem;flex-wrap:wrap;align-items:center}

.facts{margin:0;display:flex;flex-direction:column;gap:.7rem}
.facts div{display:flex;align-items:flex-start;gap:.6rem;font-size:.85rem;color:var(--encre-2)}
.facts .ic{color:var(--gris-pale);margin-top:.13rem}
.facts em{font-style:normal;color:var(--gris-pale);display:block;font-size:.755rem;margin-bottom:.05rem}

.suppliers{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sup{padding:.8rem 0;border-bottom:1px solid var(--trait-fin)}
.sup:first-child{padding-top:0}
.sup:last-child{border-bottom:0;padding-bottom:0}
.sup-line{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.855rem}
.sup-line strong{font-weight:500;display:flex;align-items:center;gap:.55rem}
.sup-line .ic{color:var(--gris-pale)}
.sup-edit{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;margin-top:.55rem}
.sup-actions{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-top:.5rem}
.sup-who{margin:.3rem 0 0 1.6rem;font-size:.79rem;color:var(--gris)}
.sup-non_requis .sup-line strong{color:var(--gris-pale)}
.followup-box input{margin-bottom:.4rem}

.log{list-style:none;margin:0;padding:0;font-size:.81rem}
.log li{display:grid;grid-template-columns:142px 1fr 116px;gap:.7rem;padding:.45rem 0;
  border-bottom:1px solid var(--trait-fin)}
.log li:last-child{border-bottom:0}
.log-when,.log-who{color:var(--gris-pale);font-size:.75rem}
.log-what{color:var(--encre-2)}
.log-who{text-align:right}
.log-empty{color:var(--gris-pale);display:block!important}

/* ---- formulaires : libellé au-dessus, deux colonnes ---------------- */
.form{display:flex;flex-direction:column;gap:1rem;max-width:960px}
.sec{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-lg);
  padding:1.35rem 1.45rem;box-shadow:var(--ombre)}
.sec>h2{font-size:.905rem;font-weight:600;letter-spacing:-.012em;color:var(--encre);margin:0 0 1.15rem}

.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.05rem 1.15rem}
.fields.une{grid-template-columns:1fr}
.fld{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.fld.large{grid-column:1/-1}
.fld-lb{font-size:.83rem;font-weight:500;color:var(--encre-2);line-height:1.3}
.fld-lb .req{color:var(--rouge-vif);margin-left:.1rem}
.fld-lb small{display:block;font-size:.75rem;color:var(--gris-pale);font-weight:400;margin-top:.14rem;line-height:1.4}
.fld-in{min-width:0}
.fld-in.cols2{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}

input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=number],input[type=search],input[type=url],select,textarea{
  display:block;width:100%;height:40px;padding:0 .8rem;font:inherit;font-size:.875rem;
  color:var(--encre);background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-sm);
  transition:border-color .13s,box-shadow .13s}
textarea{height:auto;padding:.6rem .8rem;resize:vertical;line-height:1.6;min-height:96px}
input::placeholder,textarea::placeholder{color:#bab4ae}
input:hover:not(:disabled):not([readonly]),select:hover:not(:disabled),textarea:hover{border-color:#dbd6d1}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--rouge);
  box-shadow:0 0 0 3px var(--rouge-pale)}
input[readonly]{background:var(--fond);color:var(--gris);cursor:default}
input:disabled,select:disabled{background:var(--fond);color:var(--gris-pale);cursor:not-allowed}
input.mono{font-family:var(--fm);letter-spacing:.12em}
input[type=number]{font-variant-numeric:tabular-nums}

select{appearance:none;-webkit-appearance:none;padding-right:2.1rem;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237a736d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;background-size:11px}

.bascules{display:flex;flex-direction:column}

/* Interrupteur, comme les bascules rouges du mockup */
.bascule{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.62rem 0;border-bottom:1px solid var(--trait-fin)}
.bascule:last-child{border-bottom:0}
.bascule-txt{font-size:.85rem;color:var(--encre-2);line-height:1.35}
.bascule-txt small{display:block;font-size:.75rem;color:var(--gris-pale);margin-top:.1rem}
.sw{position:relative;display:inline-block;width:40px;height:23px;flex:0 0 40px;cursor:pointer}
.sw input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.sw i{position:absolute;inset:0;background:#dcd8d4;border-radius:var(--r-pill);transition:background .16s}
.sw i::after{content:"";position:absolute;top:2.5px;left:2.5px;width:18px;height:18px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .16s}
.sw input:checked+i{background:var(--rouge)}
.sw input:checked+i::after{transform:translateX(17px)}
.sw input:focus-visible+i{box-shadow:0 0 0 3px var(--rouge-pale)}
.sw input:disabled+i{opacity:.45;cursor:not-allowed}

.check{display:inline-flex;align-items:center;gap:.55rem;font-size:.855rem;color:var(--encre-2);
  margin:0;padding:.25rem 0;cursor:pointer}
.check input[type=checkbox]{width:17px;height:17px;margin:0;accent-color:var(--rouge);flex:0 0 17px;cursor:pointer}
.checks{display:flex;flex-direction:column;gap:.05rem}
.checks.inline{flex-direction:row;flex-wrap:wrap;gap:.2rem 1.3rem}

.form-actions{display:flex;gap:.55rem;justify-content:flex-end;align-items:center;
  padding-top:.15rem}
.form-actions .spacer{margin-right:auto}
.sec .form-actions{margin-top:1.25rem;padding-top:1.15rem;border-top:1px solid var(--trait-fin)}

.flash{display:flex;align-items:center;gap:.55rem;padding:.7rem .95rem;border-radius:var(--r);
  font-size:.855rem;margin-bottom:1.2rem;border:1px solid var(--trait);background:var(--blanc)}
.flash-erreur{background:var(--rouge-pale);border-color:var(--rouge-bord);color:var(--rouge-vif)}
.flash-ok{background:var(--vert-pale);border-color:var(--vert-bord);color:var(--vert)}

.integration{border:1px solid var(--trait);border-radius:var(--r);margin-bottom:.85rem;background:var(--blanc)}
.integration:last-of-type{margin-bottom:0}
.integration>.panel-head{padding:.85rem 1.05rem;margin:0;background:#fbfbfa;
  border-bottom:1px solid var(--trait-fin);border-radius:var(--r) var(--r) 0 0}
.integration .fields{padding:1.05rem}

.tokens{display:flex;flex-wrap:wrap;gap:.32rem;margin-top:.7rem}
.token{font-family:var(--fm);font-size:.72rem;background:var(--trait-fin);border:1px solid transparent;
  border-radius:var(--r-pill);padding:.18rem .5rem;color:var(--gris);cursor:pointer}
.token:hover{border-color:var(--rouge);color:var(--rouge-vif);background:var(--rouge-pale)}

.mail-preview{border:1px solid var(--trait);border-radius:var(--r);overflow:hidden;
  margin-top:.9rem;background:var(--blanc);box-shadow:var(--ombre-md)}
.mail-preview header{padding:.7rem .9rem;border-bottom:1px solid var(--trait-fin);
  background:#fbfbfa;font-size:.79rem;color:var(--gris)}
.mail-preview header strong{color:var(--encre);font-weight:600}
.mp-f{display:flex;flex-direction:column;gap:.35rem;margin:.85rem .9rem}
.mp-f>span{font-size:.79rem;color:var(--encre-2);font-weight:500}
.mail-preview textarea{min-height:205px;font-size:.83rem;line-height:1.65}
.quote-log{list-style:none;margin:.65rem 0 0;padding:0;font-size:.765rem;color:var(--gris-pale)}
.quote-log li{padding:.16rem 0;display:flex;justify-content:space-between;gap:.5rem}

/* ---- tables --------------------------------------------------------- */
.two-col{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:1rem;align-items:start}
.table{width:100%;border-collapse:collapse;font-size:.86rem}
.table th{text-align:left;font-size:.735rem;color:var(--gris-pale);font-weight:600;
  padding:0 .6rem .65rem;border-bottom:1px solid var(--trait)}
.table td{padding:.7rem .6rem;border-bottom:1px solid var(--trait-fin);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:#fbfbfa}
.table small{color:var(--gris-pale);font-size:.75rem}
.table .nom{display:flex;align-items:center;gap:.65rem;min-width:0}
.td-right{text-align:right}
.td-empty{color:var(--gris-pale);text-align:center;padding:2.2rem}

/* ---- calendrier ------------------------------------------------------ */
.cal{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--ombre)}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--trait);background:#fbfbfa}
.cal-head span{padding:.6rem;font-size:.735rem;color:var(--gris-pale);font-weight:600;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-day{min-height:116px;border-right:1px solid var(--trait-fin);border-bottom:1px solid var(--trait-fin);padding:.45rem}
.cal-day:nth-child(7n){border-right:0}
.cal-day.is-out{background:#fbfbfa}
.cal-day.is-out .cal-num{color:var(--gris-pale)}
.cal-day.is-today .cal-num{background:var(--rouge);color:#fff;border-radius:50%;
  width:22px;height:22px;display:inline-grid;place-items:center;font-weight:600}
.cal-num{font-size:.755rem;color:var(--gris);display:block;margin-bottom:.3rem;font-variant-numeric:tabular-nums}
.cal-ev{display:block;font-size:.7rem;font-weight:500;padding:.2rem .4rem;border-radius:6px;
  margin-bottom:.18rem;background:var(--trait-fin);color:var(--encre-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-ev:hover{text-decoration:none;filter:brightness(.965)}
.cal-mariage{background:var(--mauve-pale);color:var(--mauve)}
.cal-corporatif{background:var(--bleu-pale);color:var(--bleu)}
.cal-bal{background:var(--ambre-pale);color:var(--ambre)}
.cal-anniversaire{background:var(--vert-pale);color:var(--vert)}
.cal-ev.has-followup{box-shadow:inset 2.5px 0 0 var(--rouge-clair)}

/* Contrôle segmenté du calendrier */
.segment{display:inline-flex;background:var(--trait-fin);border-radius:var(--r-sm);padding:3px;gap:2px}
.segment a{display:inline-flex;align-items:center;height:30px;padding:0 .8rem;border-radius:7px;
  font-size:.82rem;font-weight:500;color:var(--gris)}
.segment a:hover{text-decoration:none;color:var(--encre)}
.segment a.is-on{background:var(--rouge);color:#fff}

/* ---- connexion -------------------------------------------------------- */
.login-body{display:grid;place-items:center;min-height:100vh;background:var(--fond)}
.login{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-lg);
  padding:2.4rem 2.15rem;width:min(390px,92vw);box-shadow:var(--ombre-lg)}
.login-logo{width:118px;height:auto;display:block;margin:0 0 1.6rem}
.login h1{font-size:1.08rem;margin-bottom:1.45rem;text-align:center}
.login-field{display:flex;flex-direction:column;gap:.4rem;margin:0 0 1rem}
.login-field>span{font-size:.83rem;color:var(--encre-2);font-weight:500}
.login .btn{width:100%;height:42px;margin-top:.7rem}
.login-err{background:var(--rouge-pale);border:1px solid var(--rouge-bord);color:var(--rouge-vif);
  padding:.65rem .85rem;border-radius:var(--r-sm);font-size:.83rem;margin:0 0 1.15rem}

.empty-page{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-lg);
  padding:3.5rem 2rem;text-align:center;box-shadow:var(--ombre)}
.empty-page h1{font-size:1.15rem;margin-bottom:.5rem}
.empty-page p{color:var(--gris);font-size:.88rem;margin:.3rem 0}

.toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%);background:var(--encre);
  color:#fff;padding:.68rem 1.2rem;border-radius:var(--r-pill);font-size:.855rem;z-index:50;
  box-shadow:var(--ombre-lg);animation:toast-in .18s ease-out}
.toast.is-err{background:var(--rouge-vif)}
@keyframes toast-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---- adaptatif -------------------------------------------------------- */
@media (max-width:1280px){
  .board{grid-template-columns:repeat(5,minmax(208px,1fr))}
  .detail,.two-col{grid-template-columns:1fr}
}
@media (max-width:860px){
  .shell{flex-direction:column}
  .side{width:100%;flex:none;height:auto;position:sticky;top:0;z-index:20;
    flex-direction:row;align-items:center;justify-content:space-between;padding:.5rem .85rem;
    border-right:0;border-bottom:1px solid var(--trait);overflow-x:auto}
  .brand{padding:0;flex:0 0 auto}
  .brand img{max-width:98px}
  .nav{display:flex;gap:.15rem;padding:0;flex:1;justify-content:flex-end;overflow-x:auto}
  .nav-item{white-space:nowrap;font-size:.8rem;padding:.4rem .55rem}
  .nav-sep{display:none}
  .side-foot{border:0;padding:0;flex:0 0 auto}
  .me{margin:0}
  .me-txt,.signout{display:none}
  .main{padding:1.05rem}
  .board{display:flex;overflow-x:auto;gap:.65rem;scroll-snap-type:x mandatory;padding-bottom:.5rem}
  .col{flex:0 0 84vw;scroll-snap-align:start}
  .fields{grid-template-columns:1fr}
  .next-action,.sup-edit,.fld-in.cols2{grid-template-columns:1fr}
  .log li{grid-template-columns:1fr;gap:.15rem}
  .log-who{text-align:left}
  .search{width:100%}
  .search input{min-width:0;width:100%}
  .form-actions{flex-wrap:wrap}
  .cal-day{min-height:80px}
}