/* =========================================================================
   SYOU · Projets — feuille de style unique
   Identité reprise du logo : encre #18212A sur papier crème pointillé,
   étiquettes de prestation façon panneau de direction (manuscrites, inclinées).
   ========================================================================= */

/* Polices de la charte 2026, les mêmes que sur agence-syou.fr :
   Chunk pour les titres, Instrument Serif pour les étiquettes et les phrases,
   General Sans pour tout le reste. Servies depuis ce serveur. */
@font-face{font-family:'Chunk';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/Chunk.otf) format('opentype');}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/InstrumentSerif-Regular.woff2) format('woff2');}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/InstrumentSerif-Italic.woff2) format('woff2');}
@font-face{font-family:'General Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/GeneralSans-400.woff2) format('woff2');}
@font-face{font-family:'General Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/GeneralSans-500.woff2) format('woff2');}
@font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/GeneralSans-600.woff2) format('woff2');}
@font-face{font-family:'General Sans';font-style:normal;font-weight:700 900;font-display:swap;
  src:url(fonts/GeneralSans-700.woff2) format('woff2');}

:root{
  --ink:#18212A;
  --ink-80:rgba(24,33,42,.80);
  --ink-60:rgba(24,33,42,.60);
  --ink-45:rgba(24,33,42,.45);
  --ink-25:rgba(24,33,42,.25);
  --ink-12:rgba(24,33,42,.12);
  --ink-06:rgba(24,33,42,.06);

  --paper:#F6EFE0;
  --surface:#FFFCF5;
  --surface-2:#FBF6EA;

  --blue:#3E93EE;
  --blue-dark:#2B7BD1;
  --alert:#D3392A;
  --alert-soft:#FBE5E2;
  --go:#2E9E68;

  --s-logo:#F7A8D6;
  --s-web:#A9D9FF;
  --s-seo:#F98A76;
  --s-social:#8AE3AE;
  --s-ads:#F7A97B;
  --s-textile:#FBD75F;
  --s-objet:#C9B8F2;
  --s-autre:#DCD3C0;

  --r-s:8px; --r-m:14px; --r-l:20px;
  --shadow-1:0 1px 0 var(--ink-06);
  --shadow-2:0 8px 24px rgba(24,33,42,.10),0 2px 6px rgba(24,33,42,.06);
  --shadow-3:0 24px 60px rgba(24,33,42,.22);
  --head-h:62px;
}

*,*::before,*::after{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'General Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15px;line-height:1.5;color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(var(--ink-12) 1.1px,transparent 1.1px);
  background-size:19px 19px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure{margin:0;}
button,input,select,textarea{font:inherit;color:inherit;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px;}
::selection{background:var(--s-textile);color:var(--ink);}

/* ------------------------------------------------------------------ entête */
.topbar{
  position:sticky;top:0;z-index:40;height:var(--head-h);
  display:flex;align-items:center;gap:14px;padding:0 16px;
  background:var(--surface);border-bottom:2px solid var(--ink);
}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;text-decoration:none;}
.brand svg{height:19px;width:auto;display:block;color:var(--ink);}
.brand span{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-45);padding-left:10px;border-left:1.5px solid var(--ink-25);
}
.nav{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none;}
.nav::-webkit-scrollbar{display:none;}
.nav button{
  position:relative;border:0;background:none;cursor:pointer;white-space:nowrap;
  padding:8px 9px 10px;border-radius:var(--r-s);
  font-size:12px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;color:var(--ink-60);
}
.nav button:hover{color:var(--ink);background:var(--ink-06);}
.nav button[aria-current="true"]{color:var(--ink);}
.nav button[aria-current="true"]::after{
  content:"";position:absolute;left:8px;right:8px;bottom:2px;height:3px;border-radius:3px;background:var(--blue);
}
.nav .nav-badge{
  display:inline-block;margin-left:6px;min-width:17px;padding:0 4px;border-radius:9px;
  background:var(--alert);color:#fff;font-size:10px;line-height:17px;text-align:center;letter-spacing:0;
}
.topbar-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;}

.search{position:relative;}
.search input{
  width:150px;padding:8px 12px 8px 32px;border:1.5px solid var(--ink-12);border-radius:999px;
  background:var(--surface-2);font-size:13.5px;transition:width .18s ease,border-color .15s ease;
}
.search input:focus{width:250px;border-color:var(--ink);outline:none;background:#fff;}
.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--ink-45);pointer-events:none;}

/* ------------------------------------------------------------------ boutons */
.btn{
  display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:9px 16px;border-radius:999px;border:1.5px solid var(--ink);background:var(--surface);
  font-size:13.5px;font-weight:700;letter-spacing:.01em;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 0 var(--ink-12);}
.btn:active{transform:translateY(0);box-shadow:none;}
.btn-primary{background:var(--ink);color:var(--surface);}
.btn-primary:hover{background:#232f3b;}
.btn-ghost{border-color:transparent;background:transparent;color:var(--ink-60);}
.btn-ghost:hover{background:var(--ink-06);color:var(--ink);box-shadow:none;transform:none;}
.btn-danger{border-color:var(--alert);color:var(--alert);background:transparent;}
.btn-danger:hover{background:var(--alert-soft);}
.btn-sm{padding:6px 12px;font-size:12.5px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}

/* ------------------------------------------------------------- qui fait quoi
   Dans une agence de quatre, le prénom est plus lisible qu'un monogramme. */
.who{
  --c:var(--blue);
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:3px 10px 3px 8px;border-radius:999px;
  border:1.5px solid color-mix(in srgb,var(--c) 55%,var(--ink-12));
  background:color-mix(in srgb,var(--c) 14%,var(--surface));
  font-size:11.5px;font-weight:700;letter-spacing:.01em;color:var(--ink);white-space:nowrap;
}
.who i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:0 0 auto;}
.who-none{
  border-style:dashed;border-color:var(--ink-25);background:transparent;
  color:var(--ink-45);font-weight:600;padding-left:10px;
}
.who-btn{cursor:pointer;padding:5px 13px 5px 10px;font-size:12.5px;}
.who-btn:hover{background:color-mix(in srgb,var(--c) 24%,var(--surface));}

.who-dot{width:9px;height:9px;border-radius:50%;background:var(--c,var(--blue));flex:0 0 auto;display:inline-block;}
.who-dot-none{background:transparent;border:1.5px dashed var(--ink-25);}

.who-swatch{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:inline-block;
  background:var(--c,var(--blue));border:1.5px solid var(--ink-12);
}
.who-swatch-none{background:transparent;border-style:dashed;border-color:var(--ink-25);}

/* ------------------------------------------------------------ vignette client */
.cmark{
  display:inline-grid;place-items:center;flex:0 0 auto;overflow:hidden;
  width:28px;height:28px;border-radius:8px;
  border:1.5px solid var(--ink-12);background:var(--surface-2);
}
.cmark img{width:100%;height:100%;object-fit:contain;padding:2px;display:block;}
.cmark > span{font-size:10px;font-weight:800;letter-spacing:.01em;color:var(--ink-45);}
/* Sur le tableau, le logo est posé tel quel, sans cadre ni fond : c'est
   l'image du client, pas une vignette. La hauteur est fixe, la largeur suit
   le format — un carré reste carré, un bandeau reste un bandeau, et la
   largeur maximale garde l'alignement des cartes. */
.cmark-nu{width:auto;height:auto;max-width:132px;border:0;border-radius:0;
  background:transparent;overflow:visible;}
.cmark-nu img{width:auto;height:38px;min-width:38px;max-width:132px;padding:0;
  object-fit:contain;object-position:left center;}

.cmark-xs{width:96px;height:44px;border-radius:9px;}
.cmark-xs img{padding:2px;}
/* Sans logo, le monogramme reprend un format carré : un rectangle pour deux
   lettres serait creux, et le nom du client s'affiche alors à côté. */
.cmark-xs.cmark-mono{width:30px;height:30px;border-radius:7px;}
.cmark-xs.cmark-mono > span{font-size:10.5px;}
.cmark-lg{width:46px;height:46px;border-radius:11px;}
.cmark-lg > span{font-size:15px;}
.cmark-none{border-style:dashed;color:var(--ink-25);background:transparent;font-size:11px;color:var(--ink-25);}

/* --------------------------------------------------- sélecteur de client */
.picker-btn{
  display:flex;align-items:center;gap:9px;cursor:pointer;text-align:left;
  font-size:14.5px;font-weight:600;
}
.picker-btn:hover{border-color:var(--ink-25);}
.picker-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.picker-empty{flex:1 1 auto;color:var(--ink-45);font-weight:500;}
.picker-caret{flex:0 0 auto;color:var(--ink-45);font-size:12px;}

.picker-menu{padding:8px;max-width:min(420px,calc(100vw - 24px));}
.picker-search{
  width:100%;padding:8px 11px;margin-bottom:6px;
  border:1.5px solid var(--ink-12);border-radius:var(--r-s);background:var(--surface-2);font-size:14px;
}
.picker-search:focus{border-color:var(--ink);outline:none;background:#fff;}
.picker-list{max-height:290px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;}
.picker-row{
  display:flex!important;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  padding:6px 8px;border:0;border-radius:var(--r-s);background:none;font-size:14px;font-weight:600;
}
.picker-row:hover,.picker-row:focus-visible{background:var(--ink-06);}
.picker-row.is-current{background:var(--ink);color:var(--surface);}
.picker-row.is-current .cmark{border-color:rgba(255,255,255,.3);}
.picker-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.picker-new{color:var(--blue);}
.picker-vide{padding:10px 8px;font-size:13px;color:var(--ink-45);}

/* ------------------------------------------------------ pastilles de couleur */
.cdot{
  width:13px;height:13px;border-radius:4px;flex:0 0 auto;display:inline-block;
  background:var(--c,var(--ink-12));border:1.5px solid var(--ink-25);
}
.cdot-chine{background:repeating-linear-gradient(45deg,#B9BAB5 0 3px,#93948F 3px 6px);}
.cdot-autre{background:repeating-linear-gradient(45deg,var(--ink-25) 0 2px,var(--surface) 2px 5px);}
.cdot-vide{background:transparent;border-style:dashed;}
.couleur-menu{padding:6px;}
.item-couleur{display:inline-flex;align-items:center;gap:6px;}

/* ------------------------------------------------------------- champ logo */
.logo-field{display:flex;align-items:flex-start;gap:14px;}

/* Le visuel joint à un article : l'aperçu ouvre le fichier d'origine. */
.visuel-apercu{
  display:grid;place-items:center;flex:0 0 auto;overflow:hidden;
  width:62px;height:62px;border-radius:var(--r-s);
  border:1.5px solid var(--ink-12);background:var(--surface-2);text-decoration:none;
}
.visuel-apercu img{width:100%;height:100%;object-fit:contain;padding:3px;display:block;}
.visuel-fichier{font-size:12px;font-weight:800;color:var(--ink-60);letter-spacing:.04em;}
.visuel-vide{
  display:grid;place-items:center;flex:0 0 auto;width:62px;height:62px;border-radius:var(--r-s);
  border:1.5px dashed var(--ink-25);color:var(--ink-25);background:transparent;
}

/* Sur la fiche de production : de quoi reconnaître le visuel et l'emporter. */
.item-visuel{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:4px 10px 4px 4px;
  border:1.5px solid var(--ink-12);border-radius:999px;background:var(--surface-2);
  font-size:11.5px;font-weight:700;color:var(--ink-60);text-decoration:none;
}
.item-visuel:hover{border-color:var(--ink);color:var(--ink);}
.item-visuel img{width:26px;height:26px;border-radius:50%;object-fit:cover;background:var(--surface);}
.logo-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1 1 auto;}
.logo-actions .btn{cursor:pointer;}
.logo-hint{flex:1 1 100%;margin:0;font-size:11.5px;line-height:1.45;color:var(--ink-45);}

.search-page{flex:1 1 260px;max-width:340px;}
.search-page input{width:100%;}
.search-page input:focus{width:100%;}

/* -------------------------------------------------- étiquette de prestation
   Le geste signature : les panneaux du logo, en petit, légèrement inclinés. */
.tag{
  --c:var(--s-autre);
  display:inline-block;padding:2px 10px 3px;border:1.5px solid var(--ink);border-radius:999px;
  background:var(--c);color:var(--ink);
  font-family:'Instrument Serif',Georgia,serif;font-size:13.5px;line-height:1.25;white-space:nowrap;
  box-shadow:1px 1.5px 0 var(--ink-12);
}
.tag-logo{--c:var(--s-logo);}   .tag-web{--c:var(--s-web);}
.tag-seo{--c:var(--s-seo);}     .tag-social{--c:var(--s-social);}
.tag-ads{--c:var(--s-ads);}     .tag-textile{--c:var(--s-textile);}
.tag-objet{--c:var(--s-objet);}
.tag-autre{--c:var(--s-autre);}

/* --------------------------------------------------------------- pastilles */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:700;letter-spacing:.02em;white-space:nowrap;
  background:var(--ink-06);color:var(--ink-60);
}
.pill-late{background:var(--alert-soft);color:var(--alert);}
.pill-soon{background:#FDF0D2;color:#8A6410;}
.pill-wait{background:#E7EFF7;color:#2B6096;}
.pill-relance{background:var(--alert);color:#fff;}
.pill-done{background:#E2F3E9;color:var(--go);}
.pill-tarif{background:var(--ink);color:var(--surface);}

/* ------------------------------------------------------------------- pages */
.page{padding:22px 20px 80px;}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px;flex-wrap:wrap;}
.page-title{font-size:27px;font-weight:800;letter-spacing:-.022em;line-height:1.1;}
.page-sub{margin-top:5px;font-size:13.5px;color:var(--ink-60);max-width:62ch;}

.filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
.filters .sep{width:1.5px;height:22px;background:var(--ink-12);margin:0 4px;}
.chip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  padding:5px 12px 5px 6px;border-radius:999px;border:1.5px solid var(--ink-12);background:var(--surface);
  font-size:12.5px;font-weight:600;color:var(--ink-60);transition:border-color .12s,color .12s;
}
.chip:hover{border-color:var(--ink-25);color:var(--ink);}
.chip[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink);}
.chip[disabled]{cursor:default;opacity:.85;}
.chip[disabled]:hover{border-color:var(--ink);}
.chip-plain{padding-left:12px;}

/* ----------------------------------------------------------------- tableau */
/* Le plateau : le travail à gauche, la boîte de tri en petit sur la droite. */
.plateau{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:20px;align-items:start;}
.plateau-principal{min-width:0;}

.plateau-tri{min-width:0;}
.plateau-tri .col-head{padding-bottom:7px;margin-bottom:10px;border-bottom-width:1.5px;}
.plateau-tri .col-name{font-size:10.5px;color:var(--ink-45);}
.plateau-tri .col-count{height:18px;min-width:18px;line-height:18px;font-size:10px;}
.plateau-tri .card{padding:11px 12px 10px;}
.plateau-tri .card-nom{font-size:13.5px;margin-bottom:2px;}
.plateau-tri .card-title{font-size:12.5px;line-height:1.3;}
.plateau-tri .card-foot{margin-top:8px;gap:5px;}
.plateau-tri .capture{padding:9px 10px 10px;}
.plateau-tri .capture textarea{min-height:44px;font-size:13px;}
.plateau-tri .capture label{font-size:9.5px;}
.plateau-tri .empty{padding:16px 12px;font-size:12px;}

/* -------------------------------------------------- heures de l'atelier */
.heures{margin-top:34px;padding-top:26px;border-top:1.5px solid var(--ink-12);}
.heures-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px;}
.heures-sous{margin:5px 0 0;font-size:12.5px;color:var(--ink-45);max-width:58ch;}
.heures-sous strong{color:var(--ink);font-weight:800;}

.heures-solde{display:flex;align-items:baseline;gap:7px;white-space:nowrap;}
.heures-solde-nombre{font-size:21px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.heures-solde.est-plus .heures-solde-nombre{color:var(--go);}
.heures-solde.est-moins .heures-solde-nombre{color:var(--alert);}
.heures-solde-unite{font-size:12px;font-weight:700;color:var(--ink-60);}

.heures-tableau{max-width:620px;}
.heures-ligne{
  display:grid;grid-template-columns:minmax(0,1fr) 118px 150px;align-items:center;
  gap:12px;padding:9px 13px;border-top:1.5px solid var(--ink-12);
}
.heures-ligne:first-child{border-top:0;}
.heures-ligne.est-courante{background:var(--surface-2);}
.heures-titre{display:block;font-size:13.5px;font-weight:700;}
.heures-dates{display:block;font-size:11.5px;color:var(--ink-45);}
.heures-saisie input{width:100%;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
.heures-lecture{display:block;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
.heures-ecart{
  font-size:12.5px;font-weight:700;text-align:right;color:var(--ink-45);
  font-variant-numeric:tabular-nums;
}
.heures-ecart.est-plus{color:var(--go);}
.heures-ecart.est-moins{color:var(--alert);}

@media (max-width:640px){
  .heures-ligne{grid-template-columns:minmax(0,1fr) 96px;}
  .heures-ecart{grid-column:2;text-align:right;}
}

/* Le pied de page : discret, il ferme la page sans jamais attirer l'œil. */
.pied{
  display:flex;align-items:center;gap:14px;
  margin:44px 0 0;padding-top:16px;border-top:1.5px solid var(--ink-12);
}
.pied-lien{
  border:0;background:none;padding:4px 0;cursor:pointer;font:inherit;
  font-size:12.5px;font-weight:700;color:var(--ink-45);
  text-decoration:underline;text-underline-offset:3px;
}
.pied-lien:hover{color:var(--ink);}
.pied-lien[aria-current="true"]{color:var(--ink);}
.pied-mention{
  margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-25);
}

/* Le travail en cours occupe toute la largeur, en tuiles : à quatorze projets,
   une colonne étroite obligeait à faire défiler pour voir sa charge. */
.board-cours{margin-bottom:26px;}
/* Deux classes sur le même élément : on précise, sinon .col-body l'emporte. */
.col-body.col-body-grille{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));
  gap:11px;align-items:start;
}
.board{
  display:grid;gap:14px;align-items:start;
  grid-template-columns:repeat(2,minmax(240px,1fr));
}
.col{display:flex;flex-direction:column;min-width:0;}
.col-head{display:flex;align-items:center;gap:9px;padding:0 4px 9px;border-bottom:2px solid var(--ink);margin-bottom:12px;}
.col-name{font-size:12px;font-weight:800;letter-spacing:.085em;text-transform:uppercase;}
.col-count{
  min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:var(--ink);color:var(--surface);
  font-size:11px;font-weight:700;line-height:21px;text-align:center;
}
.col-hint{margin-left:auto;font-size:11px;color:var(--ink-45);}
.col-body{display:flex;flex-direction:column;gap:11px;min-height:120px;padding:2px;border-radius:var(--r-m);}
.col-body.drop-target{background:rgba(62,147,238,.10);box-shadow:inset 0 0 0 2px var(--blue);}

/* --------------------------------------------------------------- la carte */
.card{
  position:relative;cursor:pointer;text-align:left;width:100%;
  padding:14px 14px 12px;border:1.5px solid var(--ink-12);border-radius:var(--r-m);
  background:var(--surface);box-shadow:var(--shadow-1);
  transition:transform .13s ease,box-shadow .13s ease,border-color .13s ease;
}
.card:hover{transform:translateY(-2px);border-color:var(--ink-25);box-shadow:var(--shadow-2);}
.card.dragging{opacity:.4;}
/* L'étiquette reste dans le flux : en absolu elle recouvrait le nom du client
   dès que le libellé dépassait la réserve, quelle que soit la largeur. */
.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:7px;}
.card-tag{
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;
  flex:0 1 auto;order:2;margin-top:-3px;transform:rotate(-2.5deg);transform-origin:right center;
}
.card:nth-child(even) .card-tag{transform:rotate(2deg);}
.card-client{
  display:flex;align-items:center;gap:7px;flex:1 1 96px;min-width:0;padding-top:2px;
  font-size:10.5px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;color:var(--ink-45);
}
.card-client span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Le nom du client mène la carte : c'est par lui qu'on cherche un projet.
   Le titre passe en dessous, plus discret, pour la lecture de détail. */
.card-nom{
  font-size:16.5px;font-weight:800;letter-spacing:-.015em;line-height:1.2;color:var(--ink);
  margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.card-nom-vide{color:var(--ink-25);}
.card-title{font-size:14.5px;font-weight:600;letter-spacing:-.004em;line-height:1.3;color:var(--ink-80);}
.card-foot{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:11px;}
.card-foot .spacer{flex:1 1 auto;}
.card-sub{font-size:11.5px;color:var(--ink-45);font-weight:600;}
.card.is-waiting{
  background-image:repeating-linear-gradient(135deg,var(--ink-06) 0 6px,transparent 6px 13px);
  background-size:auto;background-position:left top;background-repeat:no-repeat;
  background-clip:border-box;
}
.card.is-waiting::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:4px;border-radius:0 4px 4px 0;background:#2B6096;
}
.card.is-late{border-color:rgba(211,57,42,.45);}
.card.is-relance{border-color:var(--alert);box-shadow:0 0 0 1px var(--alert);}
/* L'urgence se lit au contour, franchement : c'est le seul signal qui doit
   arrêter l'œil avant tous les autres. */
.card.is-urgent{border-color:var(--alert);border-width:2px;box-shadow:0 0 0 2px rgba(211,57,42,.16);}
.card.is-urgent:hover{border-color:var(--alert);box-shadow:0 0 0 2px rgba(211,57,42,.24),var(--shadow-2);}
.prio-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--alert);margin-right:6px;vertical-align:1px;}

/* -------------------------------------------------- capture rapide « à trier » */
.capture{
  position:relative;margin-bottom:11px;padding:11px 12px 12px;
  border:1.5px solid var(--ink);border-radius:var(--r-m);
  background:color-mix(in srgb,var(--s-textile) 45%,var(--surface));
  transform:rotate(-.5deg);box-shadow:2px 3px 0 var(--ink-12);
}
.capture label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60);margin-bottom:6px;}
.capture textarea{
  width:100%;min-height:52px;resize:vertical;padding:8px 10px;
  border:1.5px solid var(--ink-25);border-radius:var(--r-s);background:var(--surface);
  font-size:14px;line-height:1.4;
}
.capture textarea:focus{border-color:var(--ink);outline:none;}
.capture .capture-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;}
.capture .hint{font-size:11px;color:var(--ink-60);}

/* Le « + » d'une colonne : discret, il n'apparaît qu'au survol de l'en-tête. */
.col-ajouter{margin-left:auto;opacity:0;color:var(--ink-45);}
.col-head:hover .col-ajouter,.col-ajouter:focus{opacity:1;}
.col-ajouter:hover{color:var(--ink);}

/* ------------------------------------------------- ce qu'on a à faire pour nous */
/* Le bloc de l'agence : sur fond bleu, il ne se confond pas avec le travail
   des clients. C'est le seul endroit du tableau qui parle de nous. */
.idees{
  margin-top:22px;padding:13px 13px 15px;
  border:1.5px solid var(--ink);border-radius:var(--r-m);
  background:var(--blue);
  box-shadow:3px 4px 0 var(--ink);
}
.idees-tete{display:flex;align-items:center;gap:7px;margin-bottom:10px;}
.idees-marque{display:block;width:18px;height:18px;flex:0 0 auto;}
.idees .col-name{color:var(--ink);}
.idees .col-count{background:var(--ink);color:var(--surface);}
.capture-idee{
  background:var(--surface);
  transform:rotate(.4deg);
}
.idee:hover{background:color-mix(in srgb,var(--surface) 45%,transparent);}
.idees .idee-texte:focus{background:var(--surface);}
.idee-liste{display:flex;flex-direction:column;gap:2px;}
.idee-faites{margin-top:12px;}
.idee-separateur{
  margin-bottom:5px;font-size:10px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink);opacity:.5;
}
.idee{display:flex;align-items:flex-start;gap:7px;padding:4px 5px;border-radius:var(--r-s);}
.idee .check{flex:0 0 auto;margin-top:2px;}
.idee-texte{
  flex:1 1 auto;min-width:0;padding:2px 3px;border:0;background:none;resize:none;overflow:hidden;
  font-family:inherit;font-size:12.5px;line-height:1.4;color:var(--ink);
}
.idee-texte:focus{outline:none;background:var(--surface);border-radius:var(--r-s);
  box-shadow:0 0 0 1.5px var(--ink-25);}
.idee.est-faite .idee-texte{color:var(--ink-45);text-decoration:line-through;}
.idee-retirer{flex:0 0 auto;margin-top:1px;opacity:0;color:var(--ink-45);}
.idee:hover .idee-retirer,.idee-retirer:focus{opacity:1;}
.idee-retirer:hover{color:var(--alert);}
.idee-vide{margin:2px 3px 0;font-size:11.5px;line-height:1.5;color:var(--ink);opacity:.72;}

.empty{
  padding:26px 16px;border:1.5px dashed var(--ink-25);border-radius:var(--r-m);
  text-align:center;color:var(--ink-45);font-size:13px;
}
.empty strong{display:block;font-size:14.5px;color:var(--ink-60);margin-bottom:3px;font-weight:700;}

/* ------------------------------------------------------------------ listes */
.stack{display:flex;flex-direction:column;gap:10px;}
.group{margin-bottom:26px;}
.group-head{display:flex;align-items:center;gap:10px;margin-bottom:11px;}
.group-title{font-size:12px;font-weight:800;letter-spacing:.085em;text-transform:uppercase;}
.group-rule{flex:1 1 auto;height:1.5px;background:var(--ink-12);}
.group-late .group-title{color:var(--alert);}

.row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:11px 14px;border:1.5px solid var(--ink-12);border-radius:var(--r-m);background:var(--surface);
  transition:border-color .12s,transform .12s;
}
.row:hover{border-color:var(--ink-25);transform:translateX(2px);}
.row-main{flex:1 1 auto;min-width:0;}
.row-title{font-size:15px;font-weight:700;line-height:1.3;}
.row-meta{margin-top:2px;font-size:11.5px;color:var(--ink-45);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.row-side{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 1 auto;flex-wrap:wrap;}
.row.is-late{border-color:rgba(211,57,42,.4);}

.check{
  flex:0 0 auto;width:21px;height:21px;border-radius:6px;cursor:pointer;
  border:1.5px solid var(--ink-25);background:var(--surface);display:grid;place-items:center;padding:0;
}
.check:hover{border-color:var(--ink);}
.check[aria-checked="true"]{background:var(--go);border-color:var(--go);color:#fff;}
.check svg{opacity:0;}
.check[aria-checked="true"] svg{opacity:1;}

/* ------------------------------------------------------- équipe / colonnes */
.lanes{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));align-items:start;}
.lane{border:1.5px solid var(--ink-12);border-radius:var(--r-l);background:var(--surface-2);padding:14px;}
.lane-head{display:flex;align-items:center;gap:10px;margin-bottom:13px;}
.lane-name{font-size:14.5px;font-weight:800;letter-spacing:-.01em;}
.lane-job{font-size:11px;color:var(--ink-45);font-weight:600;}
.lane-count{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--ink-45);}
/* Dans une colonne étroite, la ligne se plie : titre au-dessus, repères en dessous. */
.lane .row{flex-wrap:wrap;row-gap:8px;}
.lane .row-main{flex:1 1 100%;}
.lane .row-side{flex:1 1 100%;justify-content:flex-start;flex-wrap:wrap;}

/* ------------------------------------------------- fiches clients compactes */
.cminis{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;}
.cmini{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  padding:7px 10px;border:1.5px solid var(--ink-12);border-radius:var(--r-s);background:var(--surface);
  font-size:13.5px;font-weight:600;transition:border-color .12s,transform .12s;
}
.cmini:hover{border-color:var(--ink);transform:translateY(-1px);}
.cmini span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* --------------------------------------------------------------- planning */
.cal-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.cal-month{font-size:19px;font-weight:800;letter-spacing:-.015em;min-width:190px;}
.cal-month-semaine{min-width:260px;}
@media (max-width:520px){
  .cal-month,.cal-month-semaine{min-width:0;font-size:16.5px;}
}
.cal-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:1.5px;background:var(--ink-12);
  border:1.5px solid var(--ink-12);border-radius:var(--r-m);overflow:hidden;}
.cal-dow{background:var(--surface-2);padding:7px 9px;font-size:10.5px;font-weight:800;
  letter-spacing:.085em;text-transform:uppercase;color:var(--ink-45);text-align:center;}
.cal-day{background:var(--surface);min-height:104px;padding:7px 8px;display:flex;flex-direction:column;gap:5px;}
.cal-day.out{background:var(--surface-2);}
.cal-day.today{background:color-mix(in srgb,var(--s-textile) 26%,var(--surface));}
.cal-num{font-size:11.5px;font-weight:700;color:var(--ink-45);}
.cal-day.today .cal-num{color:var(--ink);}
.cal-ev{
  display:block;width:100%;text-align:left;cursor:pointer;padding:4px 7px;border-radius:7px;
  border:1.5px solid var(--ink-12);background:var(--surface-2);
  font-size:11.5px;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cal-ev:hover{border-color:var(--ink);}
.cal-ev.late{background:var(--alert-soft);border-color:rgba(211,57,42,.35);color:var(--alert);}
.cal-ev .dot{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px;border:1px solid var(--ink-25);}

/* ------------------------------------------------------- planning : semaine */
.plan-modes{flex:0 0 auto;}
.semaine{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:start;}
.jour{
  display:flex;flex-direction:column;min-width:0;
  border:1.5px solid var(--ink-12);border-radius:var(--r-m);background:var(--surface);overflow:hidden;
}
.jour-tete{
  display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;padding:9px 11px;
  border-bottom:1.5px solid var(--ink-12);background:var(--surface-2);
}
.jour-nom{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-45);}
.jour-num{font-size:16px;font-weight:800;letter-spacing:-.02em;margin-left:auto;}
.jour-marque{
  flex:1 1 100%;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);
}
.jour.est-aujourdhui{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}
.jour.est-aujourdhui .jour-tete{background:color-mix(in srgb,var(--s-textile) 30%,var(--surface));}
.jour.est-passe{opacity:.72;}
.jour-corps{display:flex;flex-direction:column;gap:8px;padding:9px;min-height:74px;}
.jour-vide{
  flex:1 1 auto;min-height:34px;border-radius:var(--r-s);
  background:repeating-linear-gradient(135deg,var(--ink-06) 0 5px,transparent 5px 11px);
}
.jour-carte{
  display:block;width:100%;text-align:left;cursor:pointer;
  padding:9px 10px;border:1.5px solid var(--ink-12);border-radius:var(--r-s);background:var(--surface);
  transition:border-color .12s,transform .12s;
}
.jour-carte{cursor:grab;}
.jour-carte:hover{border-color:var(--ink);transform:translateY(-1px);}
.jour-carte.dragging,.cal-ev.dragging{opacity:.4;}
.cal-ev{cursor:grab;}
/* Jour visé pendant un déplacement. */
.jour.jour-cible{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue);}
.jour.jour-cible .jour-corps{background:rgba(62,147,238,.10);}
.cal-day.jour-cible{background:rgba(62,147,238,.14);box-shadow:inset 0 0 0 2px var(--blue);}
.jour-carte.est-retard{border-color:rgba(211,57,42,.5);background:var(--alert-soft);}
.jour-carte-tete{
  display:flex;align-items:center;gap:5px;margin-bottom:4px;
  font-size:9.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-45);
}
.jour-carte-tete span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.jour-carte-titre{font-size:13.5px;font-weight:700;line-height:1.25;}
.jour-carte-pied{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px;}
.jour-tache{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:var(--r-s);background:var(--surface-2);}
.jour-tache-texte{flex:1 1 auto;min-width:0;text-align:left;cursor:pointer;border:0;background:none;padding:0;}
.jour-tache-texte span{display:block;font-size:12.5px;font-weight:700;line-height:1.25;}
.jour-tache-texte small{display:block;font-size:10.5px;color:var(--ink-45);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* ------------------------------------------------------------- panneau (drawer) */
.scrim{position:fixed;inset:0;z-index:50;background:rgba(24,33,42,.34);backdrop-filter:blur(2px);}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:51;width:min(520px,100vw);
  display:flex;flex-direction:column;background:var(--surface);border-left:2px solid var(--ink);
  box-shadow:var(--shadow-3);animation:slide-in .2s cubic-bezier(.2,.8,.3,1);
}
@keyframes slide-in{from{transform:translateX(26px);opacity:.4;}to{transform:none;opacity:1;}}
.drawer-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1.5px solid var(--ink-12);}
.drawer-head .spacer{flex:1 1 auto;}
.drawer-body{flex:1 1 auto;overflow-y:auto;padding:18px 20px 28px;}
.drawer-foot{display:flex;align-items:center;gap:10px;padding:12px 16px;border-top:1.5px solid var(--ink-12);background:var(--surface-2);}
.icon-btn{
  display:grid;place-items:center;width:32px;height:32px;padding:0;cursor:pointer;
  border:0;border-radius:var(--r-s);background:transparent;color:var(--ink-60);
}
.icon-btn:hover{background:var(--ink-06);color:var(--ink);}

/* ------------------------------------------------------------------ montants */
.money{position:relative;display:block;}
.money input{padding-right:30px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
.money span{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-size:13.5px;font-weight:700;color:var(--ink-45);pointer-events:none;
}
.tarif-ligne{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.tarif-calc{font-size:13px;color:var(--ink-60);font-weight:600;}
.tarif-calc strong{color:var(--ink);font-weight:800;}

.item-line-money{display:block;font-size:12.5px;font-weight:800;color:var(--ink);margin-top:2px;}
/* Le tarif se saisit sur la fiche : un champ discret, qui n'attire l'œil que
   lorsqu'on s'en approche. */
.item-line-tarif{width:96px;margin-top:6px;}
.item-line-tarif input{
  width:100%;padding:4px 22px 4px 7px;font-size:12px;font-weight:700;
  border-color:transparent;background:transparent;text-align:right;
}
.item-line-tarif input:hover{border-color:var(--ink-12);background:var(--surface);}
.item-line-tarif input:focus{border-color:var(--ink);background:var(--surface);}
.item-line-tarif span{right:7px;font-size:12px;}
.item-line-pu{display:block;font-size:10.5px;font-weight:600;color:var(--ink-45);}

/* ------------------------------------------------ fiche projet, en lecture
   Une fois un projet réglé, on vient le consulter : l'intitulé, la date, le
   brief. Le paramétrage se déplie à la demande. */
.lecture-client{
  display:flex;align-items:center;gap:11px;margin-bottom:14px;
  font-size:11px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;color:var(--ink-45);
}
/* Le bouton se pose au bout de la ligne du client, sans reprendre la casse
   du libellé qui, lui, est en capitales. */
.lecture-client-fiche{margin-left:auto;flex:0 0 auto;text-transform:none;letter-spacing:0;}

/* Petit lien discret sous un champ : il ouvre autre chose que le formulaire
   en cours, il ne doit donc pas ressembler à un bouton d'action. */
.lien-fiche{
  display:inline-block;margin-top:7px;padding:0;border:0;background:none;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-45);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer;
}
.lien-fiche:hover{color:var(--ink);}

.lecture-titre{font-size:25px;font-weight:800;letter-spacing:-.022em;line-height:1.18;margin-bottom:26px;}

/* Le lien Dropbox : un champ et, dès qu'il est rempli, de quoi l'ouvrir. */
.lien-champ{display:flex;align-items:center;gap:8px;}
.lien-champ .input{flex:1 1 auto;min-width:0;}
.lien-dropbox,.lien-champ a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;}
.lien-dropbox svg{color:#0061FE;}
.lecture-bloc{padding-top:18px;border-top:1.5px solid var(--ink-12);margin-bottom:18px;}
.lecture-bloc .label{margin-bottom:8px;}
.lecture-date{font-size:19px;font-weight:800;letter-spacing:-.015em;}
.lecture-delai{margin-top:3px;font-size:13.5px;font-weight:600;color:var(--ink-60);}
.lecture-delai.est-depasse{color:var(--alert);font-weight:700;}
.lecture-texte{font-size:15px;line-height:1.55;white-space:pre-wrap;}
.lecture-vide{font-size:14px;color:var(--ink-45);font-style:italic;}

/* ------------------------------------------------------------ formulaires */
.field{margin-bottom:15px;}
.field > label,.label{
  display:block;margin-bottom:6px;
  font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60);
}
.input,input[type=text].input,input[type=date].input,input[type=email].input,
input[type=password].input,select.input,textarea.input{
  width:100%;padding:9px 12px;border:1.5px solid var(--ink-12);border-radius:var(--r-s);
  background:var(--surface);font-size:14.5px;
}
.input:focus{border-color:var(--ink);outline:none;background:#fff;}
textarea.input{min-height:96px;resize:vertical;line-height:1.5;}
.input-title{font-size:19px;font-weight:800;letter-spacing:-.015em;padding:8px 10px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.seg{display:flex;gap:6px;flex-wrap:wrap;}
.seg button{
  cursor:pointer;padding:7px 13px;border-radius:999px;border:1.5px solid var(--ink-12);
  background:var(--surface);font-size:13px;font-weight:600;color:var(--ink-60);
}
.seg button:hover{border-color:var(--ink-25);color:var(--ink);}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface);}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;padding:10px 12px;
  border:1.5px solid var(--ink-12);border-radius:var(--r-s);background:var(--surface-2);}
.switch input{width:17px;height:17px;accent-color:var(--blue);margin:0;}
.switch span{font-size:14px;font-weight:600;}
.divider{height:1.5px;background:var(--ink-12);margin:20px 0;}
.section-label{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-60);margin-bottom:10px;}

/* ----------------------------------------------------- fiche atelier (édition) */
.item{
  padding:13px 14px;border:1.5px solid var(--ink-12);border-radius:var(--r-m);background:var(--surface);
}
.item-head{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.item-total{
  padding:3px 10px;border-radius:999px;background:var(--ink);color:var(--surface);
  font-size:11.5px;font-weight:800;letter-spacing:.02em;
}
.seg-sm button{padding:5px 11px;font-size:12.5px;}
.sizes{display:flex;flex-wrap:wrap;gap:7px;align-items:flex-end;}
.size{display:flex;flex-direction:column;gap:3px;width:52px;}
.size span{
  font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-45);text-align:center;
}
.size input{
  width:100%;padding:7px 4px;text-align:center;
  border:1.5px solid var(--ink-12);border-radius:var(--r-s);background:var(--surface-2);
  font-size:14.5px;font-weight:700;
}
.size input:focus{border-color:var(--ink);outline:none;background:#fff;}
.sizes .size-add{align-self:flex-end;margin-bottom:1px;}

/* Deux colonnes, mais en maçonnerie : une fiche de trois articles ne laisse
   plus un trou à côté d'une fiche d'un seul. Les colonnes CSS donnent ce
   remplissage-là ; les fiches ne se coupent jamais en deux. */
/* Deux colonnes en maçonnerie : la répartition se fait au rendu, chaque fiche
   allant dans la colonne la plus courte. */
.group-atelier .stack{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start;
}
.stack-colonne{display:flex;flex-direction:column;gap:14px;min-width:0;}
@media (max-width:1080px){ .group-atelier .stack{grid-template-columns:minmax(0,1fr);} }

/* ------------------------------------------------------- fiche atelier (poste) */
.fiche{border:1.5px solid var(--ink-12);border-radius:var(--r-l);background:var(--surface);overflow:hidden;}
.fiche-head{
  display:flex;align-items:center;gap:14px;padding:14px 16px;flex-wrap:wrap;
  border-bottom:2px solid var(--ink);background:var(--surface-2);
}
/* En écran étroit, les repères passent sous le titre plutôt que de l'écraser. */
.fiche-id{flex:1 1 240px;min-width:0;}
.fiche-client{font-size:10.5px;font-weight:700;letter-spacing:.085em;text-transform:uppercase;color:var(--ink-45);}
.fiche-title{font-size:18px;font-weight:800;letter-spacing:-.015em;line-height:1.2;margin-top:2px;}
.fiche-meta{margin-top:3px;font-size:12px;color:var(--ink-60);font-weight:600;}
/* Facture faite : un geste, et la fiche peut partir. */
.fiche-facture{white-space:nowrap;}
.fiche-facture.est-faite{
  background:color-mix(in srgb,var(--go) 16%,var(--surface));
  border-color:var(--go);color:var(--go);
}
.fiche-ranger:hover{color:var(--alert);}

.fiche-side{display:flex;align-items:center;gap:7px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end;}
.fiche-items{display:flex;flex-direction:column;}

.item-line{
  display:flex;align-items:flex-start;gap:12px;padding:13px 16px;
  border-top:1.5px solid var(--ink-12);border-left:6px solid var(--ink-25);
}
.item-line:first-child{border-top:0;}

/* L'avancement doit sauter aux yeux : liseré épais, fond teinté, et l'état
   écrit en toutes lettres. Sur une fiche d'atelier, c'est l'information qu'on
   cherche en premier. */
.item-line.etat-attente{border-left-color:#E0B347;background:color-mix(in srgb,#FDF0D2 42%,var(--surface));}
.item-line.etat-production{border-left-color:var(--blue);background:color-mix(in srgb,#E7EFF7 55%,var(--surface));}
.item-line.etat-pret{border-left-color:var(--go);background:color-mix(in srgb,#E2F3E9 55%,var(--surface));}
.item-line.etat-pret .item-line-main{opacity:.62;}

.etat-badge{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;
  border:1.5px solid transparent;
}
.etat-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
.etat-badge-attente{background:#FDF0D2;color:#8A6410;border-color:rgba(138,100,16,.28);}
.etat-badge-production{background:#E2ECF9;color:#1F5EA8;border-color:rgba(31,94,168,.28);}
.etat-badge-pret{background:#DFF1E7;color:#1E7A4C;border-color:rgba(30,122,76,.28);}

.fiche-origine{
  display:inline-block;margin-top:5px;padding:2px 8px;border-radius:999px;
  border:1.5px solid var(--ink);background:color-mix(in srgb,var(--s-social) 40%,var(--surface));
  font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
}
.fiche-etats{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.item .etat-badge{margin-right:2px;}

/* -------------------------------------------------- pictogrammes de pièces */
.picto{width:22px;height:22px;flex:0 0 auto;color:var(--ink-45);}
.picto-lg{width:34px;height:34px;color:var(--ink-60);}
.item-line > .picto-lg{margin-top:2px;}

/* ------------------------------------------------------------- avancement */
.seg-etat button[aria-pressed="true"]{background:var(--ink-45);border-color:var(--ink-45);}
.item.etat-production .seg-etat button[aria-pressed="true"],
.item-line.etat-production .seg-etat button[aria-pressed="true"]{background:var(--blue);border-color:var(--blue);}
.item.etat-pret .seg-etat button[aria-pressed="true"],
.item-line.etat-pret .seg-etat button[aria-pressed="true"]{background:var(--go);border-color:var(--go);}
.item.etat-attente{border-left:5px solid #E0B347;}
.item.etat-production{border-left:5px solid var(--blue);}
.item.etat-pret{border-left:5px solid var(--go);}
.pill-fourni{background:#EFE7F7;color:#6B4A9A;}

.item-line-main{flex:1 1 auto;min-width:0;}
.item-line-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.item-line-top strong{font-size:15px;font-weight:700;letter-spacing:-.005em;}
.item-couleur{
  padding:2px 9px;border-radius:999px;border:1.5px solid var(--ink-12);background:var(--surface-2);
  font-size:11.5px;font-weight:700;
}
/* La coupe : une mention sobre, à côté de la couleur. */
.item-coupe{
  flex:0 0 auto;padding:1px 8px;border-radius:999px;
  border:1.5px solid var(--ink-25);
  font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-60);
}
.bon-coupe{
  font-size:9pt;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#5a6472;
}

.item-marq{font-size:11.5px;font-weight:700;color:var(--ink-60);letter-spacing:.01em;}
.item-sizes{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.item-sizes-empty{font-size:12px;color:var(--ink-45);font-style:italic;}
.size-chip{
  display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:7px;
  border:1.5px solid var(--ink-12);background:var(--surface-2);font-size:13px;font-weight:700;
}
.size-chip b{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);}
.item-logo{
  margin-top:8px;padding:7px 11px;border-left:3px solid var(--s-textile);border-radius:0 var(--r-s) var(--r-s) 0;
  background:color-mix(in srgb,var(--s-textile) 20%,var(--surface));font-size:13px;line-height:1.45;
}
.item-line-total{
  flex:0 0 auto;min-width:44px;text-align:right;
  font-size:20px;font-weight:800;letter-spacing:-.02em;
}

/* -------------------------------------------------------- travail récurrent */
.rec-resume{
  padding:11px 15px;margin-bottom:16px;border-radius:var(--r-m);
  border:1.5px solid var(--ink-12);background:var(--surface);font-size:14px;
}
.rec-resume strong{font-weight:800;}

.rec-tableau{border:1.5px solid var(--ink-12);border-radius:var(--r-m);background:var(--surface);overflow:hidden;}
.rec-ligne{display:grid;grid-template-columns:minmax(280px,2.2fr) repeat(3,minmax(140px,1fr));
  border-top:1.5px solid var(--ink-12);}
.rec-ligne:first-child{border-top:0;}
.rec-entete{background:var(--surface-2);border-bottom:2px solid var(--ink);}

.rec-client{display:flex;align-items:center;gap:7px;padding:11px 13px;min-width:0;}
.rec-nom{flex:1 1 auto;min-width:60px;font-size:14.5px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rec-client > .icon-btn{margin-left:auto;}
/* Le responsable se lit au bout de la ligne : « qui s'en occupe » se pose
   naturellement après ce dont il s'agit. */
.rec-qui{margin-left:auto;font-size:11px;padding:2px 9px 2px 7px;}
.rec-qui + .icon-btn{margin-left:0;}
.pub-client-tete .rec-qui + .icon-btn{margin-left:0;}
.who.rec-qui.who-none{font-size:10.5px;}

.rec-tete{padding:9px 13px;border-left:1.5px solid var(--ink-12);}
.rec-tete-titre{display:block;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-60);}
.rec-tete-detail{display:block;margin-top:2px;font-size:12px;color:var(--ink-45);font-weight:600;}
.rec-tete.est-courante .rec-tete-titre{color:var(--ink);}

.rec-cellule{
  display:flex;flex-direction:column;gap:7px;justify-content:center;
  padding:10px 13px;border-left:1.5px solid var(--ink-12);
}
.rec-cellule.est-courante{background:color-mix(in srgb,var(--s-textile) 14%,transparent);}
.rec-cellule.est-complete{background:color-mix(in srgb,#E2F3E9 50%,transparent);}
.rec-case{display:flex;align-items:center;gap:8px;}
.rec-url{flex:1 1 auto;min-width:0;padding:5px 9px;font-size:12.5px;}
.rec-url:disabled{background:transparent;border-style:dashed;color:var(--ink-25);}

/* Le réseau : pictogramme et nom, à sa couleur de marque. */
.reseau{
  --c:var(--ink-45);
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  padding:3px 10px 3px 7px;border-radius:999px;
  border:1.5px solid color-mix(in srgb,var(--c) 40%,var(--ink-12));
  background:color-mix(in srgb,var(--c) 9%,var(--surface));
  color:var(--c);font-size:11.5px;font-weight:700;letter-spacing:.01em;white-space:nowrap;
}
.reseau svg{width:15px;height:15px;flex:0 0 auto;}
.reseau > span{color:var(--ink);}

/* La ligne se glisse par la cellule du client : les cases à cocher restent
   cliquables, et la poignée est là où l'on regarde déjà. */
.rec-client[draggable="true"]{cursor:grab;}
.rec-client[draggable="true"]:active{cursor:grabbing;}
.rec-client .icon-btn{cursor:pointer;}
.rec-ligne.dragging{opacity:.4;}
/* Le trait bleu montre où la ligne va se poser. */
.rec-ligne.rec-avant{box-shadow:inset 0 3px 0 var(--blue);}
.rec-ligne.rec-apres{box-shadow:inset 0 -3px 0 var(--blue);}

/* Ce que le suivi comprend en plus des publications. Ces rappels ne sont pas
   des réseaux : pas de couleur de marque, un simple contour. */
.rec-extra{
  display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;
  padding:3px 8px;border-radius:999px;
  border:1.5px solid var(--ink-25);background:transparent;
  font-size:10.5px;font-weight:700;color:var(--ink-60);white-space:nowrap;
}
.rec-extra svg{width:12px;height:12px;flex:0 0 auto;}
.rec-extra-ads{border-color:var(--ink);color:var(--ink);}

/* Les réseaux se posent à droite du nom : c'est un rappel, pas un compteur. */
.rec-reseaux{display:flex;align-items:center;gap:4px;flex:0 0 auto;}
.rec-reseaux-vide{min-width:0;font-size:11px;font-style:italic;color:var(--ink-25);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.reseau-seul{padding:4px;gap:0;}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.seg-reseaux{display:flex;gap:8px;flex-wrap:wrap;}
.seg-reseau{cursor:pointer;}
.seg-reseau input{position:absolute;opacity:0;pointer-events:none;}
.seg-reseau .reseau{cursor:pointer;padding:6px 13px 6px 10px;}
.seg-reseau input:checked + .reseau{
  box-shadow:0 0 0 2px var(--ink);background:color-mix(in srgb,var(--c) 16%,var(--surface));
}

/* ------------------------------------------------------------ mon espace */
/* Les notes rapides en bandeau, puis deux colonnes : la journée heure par
   heure à gauche, ses projets à droite. */
.espace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px;align-items:start;}
.espace-notes{margin-bottom:22px;}
/* Les sections se répartissent sur deux colonnes, la plus courte d'abord. */
.espace-colonnes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;align-items:start;}
.espace-colonne{min-width:0;}
.espace-colonne .group:last-child{margin-bottom:0;}
@media (max-width:1180px){ .espace-colonnes{grid-template-columns:minmax(0,1fr);} }
@media (max-width:1000px){ .espace{grid-template-columns:minmax(0,1fr);} }

/* La colonne des notes se détache de la page : c'est un carnet posé à côté du
   plan de travail, pas une liste perdue dans le fond. */
.notes-rapides{
  padding:14px 15px 16px;border:1.5px solid var(--ink);border-radius:var(--r-m);
  background:var(--surface);box-shadow:3px 4px 0 var(--ink-12);
}
.notes-tete{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.notes-compte{
  min-width:19px;height:19px;padding:0 5px;border-radius:999px;
  background:var(--ink);color:var(--surface);
  font-size:11px;font-weight:800;line-height:19px;text-align:center;
}
.capture-note{margin-bottom:12px;}
.pense-liste{display:flex;flex-direction:column;gap:2px;}
.pense-faites{margin-top:14px;}
.pense-separateur{
  margin-bottom:6px;font-size:10.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-25);
}
.pense{
  display:flex;align-items:flex-start;gap:8px;padding:5px 6px;border-radius:var(--r-s);
}
.pense:hover{background:var(--ink-06);}
.pense .check{margin-top:2px;}
/* Le champ prend la hauteur de son texte : une note de trois lignes se lit
   en entier, sans défilement dans une fente. */
.pense-texte{
  flex:1 1 auto;min-width:0;padding:3px 4px;border:0;background:none;resize:none;
  overflow:hidden;font-family:inherit;font-size:13.5px;line-height:1.4;color:var(--ink);
}
.pense-texte:focus{outline:none;background:var(--surface-2);border-radius:var(--r-s);
  box-shadow:0 0 0 1.5px var(--ink-25);}
.pense.est-faite .pense-texte{color:var(--ink-45);text-decoration:line-through;}
.pense-reste{flex:0 0 auto;margin-top:4px;font-size:10.5px;font-style:italic;color:var(--ink-25);white-space:nowrap;}
.pense-retirer{flex:0 0 auto;margin-top:1px;opacity:0;color:var(--ink-45);}
.pense:hover .pense-retirer,.pense-retirer:focus{opacity:1;}
.pense-retirer:hover{color:var(--alert);}
.pense-vide{margin:4px 2px 0;font-size:12.5px;line-height:1.5;color:var(--ink-45);}

/* ------------------------------------------------------------- agenda */
/* La journée heure par heure : une grille sobre, où l'on pose ce qui n'est
   pas un projet. Huit heures à vingt heures — au-delà, ce n'est plus du
   planning d'atelier. */
.agenda{
  display:grid;grid-template-columns:64px minmax(0,1fr);
  border:1.5px solid var(--ink-12);border-radius:var(--r-m);background:var(--surface);overflow:hidden;
}
.agenda-heures{border-right:1.5px solid var(--ink-12);}
/* Une heure vaut 52 px : la hauteur d'une tâche dit sa durée. */
.agenda-heure{
  height:52px;padding:5px 10px 0;box-sizing:border-box;
  border-top:1.5px solid var(--ink-12);
  font-size:11.5px;font-weight:800;color:var(--ink-45);font-variant-numeric:tabular-nums;
}
.agenda-heures .agenda-heure:first-child{border-top:0;}

.agenda-piste{position:relative;user-select:none;}
.agenda-demi{height:26px;box-sizing:border-box;border-top:1.5px solid var(--ink-12);cursor:cell;}
.agenda-demi.est-demie{border-top-style:dotted;border-top-color:var(--ink-06);}
.agenda-piste .agenda-demi:first-child{border-top:0;}
.agenda-demi:hover{background:var(--ink-06);}
.agenda-demi.est-choisie{background:color-mix(in srgb,var(--blue) 18%,transparent);}

/* Une tâche posée occupe sa durée, à sa place dans la journée. */
.tache-posee{
  position:absolute;margin-left:4px;align-items:flex-start;
  border-radius:var(--r-s);border-color:var(--ink-25);
  background:color-mix(in srgb,var(--blue) 12%,var(--surface));
  overflow:hidden;
}
.tache-posee .tache-corps{align-items:flex-start;}
.tache-posee .tache-titre{white-space:normal;overflow:hidden;}

.agenda-jourentier{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;padding:10px 12px;
  border:1.5px dashed var(--ink-25);border-radius:var(--r-m);
}

/* Une tâche : une case, un intitulé, et de quoi savoir à qui elle est. */
.tache{
  display:flex;align-items:center;gap:7px;min-width:0;
  padding:5px 9px 5px 6px;border:1.5px solid var(--ink-12);border-radius:999px;
  background:var(--surface);cursor:grab;
}
.tache:hover{border-color:var(--ink-25);}
.tache.dragging{opacity:.4;}
.tache .check{flex:0 0 auto;width:17px;height:17px;}
.tache-corps{
  display:flex;align-items:center;gap:7px;min-width:0;flex:1 1 auto;
  border:0;background:none;padding:0;cursor:pointer;text-align:left;font:inherit;
}
.tache-heure{
  flex:0 0 auto;font-size:11.5px;font-weight:800;color:var(--ink-80);font-variant-numeric:tabular-nums;
}
/* « dans la journée » n'est pas une heure : il reste en retrait. */
.tache-heure-libre{font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-45);}
.tache-titre{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:12.5px;font-weight:700;color:var(--ink);
}
.tache.est-faite .tache-titre{color:var(--ink-45);text-decoration:line-through;}

/* Le bouton d'ajout, discret, au pied d'un jour. */
.jour-ajouter,.cal-ajouter{
  display:flex;align-items:center;justify-content:center;
  width:100%;padding:3px;margin-top:4px;border:1.5px dashed var(--ink-12);border-radius:var(--r-s);
  background:none;color:var(--ink-25);cursor:pointer;opacity:0;
}
.jour:hover .jour-ajouter,.cal-day:hover .cal-ajouter,
.jour-ajouter:focus,.cal-ajouter:focus{opacity:1;}
.jour-ajouter:hover,.cal-ajouter:hover{border-color:var(--ink);color:var(--ink);}

.cal-tache{background:var(--surface-2);}
.cal-tache.est-faite{opacity:.55;text-decoration:line-through;}
.cal-heure{
  flex:0 0 auto;margin-right:4px;font-size:9.5px;font-weight:800;color:var(--ink-45);
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------- facturation */
/* Ce que le récurrent rapporte : le chiffre d'abord, le détail ensuite. */
.fact-bandeau{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  margin-bottom:16px;padding:14px 16px;
  border:1.5px solid var(--ink);border-radius:var(--r-m);background:var(--surface);
  box-shadow:2px 3px 0 var(--ink-12);
}
.fact-somme{display:flex;align-items:baseline;gap:8px;}
.fact-somme-nombre{font-size:30px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
.fact-somme-unite{font-size:13px;font-weight:700;color:var(--ink-60);}
.fact-somme-detail{margin:0;font-size:12.5px;color:var(--ink-45);font-weight:600;}

/* La courbe : tracée à la main en SVG, elle n'a besoin d'aucune bibliothèque.
   Les couleurs viennent des jetons de la charte, elle suit donc le reste. */
.fact-courbe{
  margin-bottom:16px;padding:14px 16px 6px;
  border:1.5px solid var(--ink-12);border-radius:var(--r-m);background:var(--surface);
}
.fact-courbe-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:4px;}
.fact-courbe svg{display:block;width:100%;height:auto;overflow:visible;}
.fact-courbe-attente{margin:6px 0 10px;font-size:12.5px;color:var(--ink-45);max-width:60ch;}

.fact-zero{stroke:var(--ink-12);stroke-width:1.5;}
.fact-aire{fill:color-mix(in srgb,var(--blue) 16%,transparent);stroke:none;}
.fact-trait{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;}
.fact-courbe .pt{fill:var(--surface);stroke:var(--ink);stroke-width:2.4;}
.fact-courbe .pt-dernier{fill:var(--blue);stroke:var(--ink);}
.fact-x{fill:var(--ink-45);font-size:13px;font-weight:600;text-anchor:middle;}

.fact-ecart{font-size:12.5px;font-weight:700;color:var(--ink-45);font-variant-numeric:tabular-nums;}
.fact-ecart.est-hausse{color:#1F8A55;}
.fact-ecart.est-baisse{color:var(--alert);}

.fact-ligne{
  display:grid;grid-template-columns:minmax(190px,1.5fr) repeat(5,minmax(104px,1fr));
  border-top:1.5px solid var(--ink-12);
}
.fact-ligne:first-child{border-top:0;}
/* L'en-tête suit le défilement : sur une longue liste, on perd sinon de vue
   quelle colonne on est en train de remplir. Il se cale sous la barre du haut,
   qui est elle-même collante. */
.fact-entete{
  position:sticky;top:var(--head-h);z-index:6;
  background:var(--surface-2);border-bottom:2px solid var(--ink);
}
/* `overflow:hidden` sur le cadre empêcherait tout collage : on arrondit donc
   les coins ligne par ligne plutôt que d'écrêter le conteneur. */
.fact-tableau,.serveurs .rec-tableau{overflow:visible;}
.fact-tableau .fact-entete,.serveurs .fact-entete{
  border-top-left-radius:calc(var(--r-m) - 2px);border-top-right-radius:calc(var(--r-m) - 2px);
}
.fact-tableau .fact-pied{
  border-bottom-left-radius:calc(var(--r-m) - 2px);border-bottom-right-radius:calc(var(--r-m) - 2px);
}
.serveurs .rec-tableau .serv-ligne:last-child{
  border-bottom-left-radius:calc(var(--r-m) - 2px);border-bottom-right-radius:calc(var(--r-m) - 2px);
}
/* Le pied porte le total : il reste visible en bas tant qu'on est dans le
   tableau, pour qu'on ait toujours la somme sous les yeux. */
.fact-pied{position:sticky;bottom:0;z-index:5;}
.fact-tete{
  padding:9px 13px;border-left:1.5px solid var(--ink-12);
  font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-60);
}
.fact-tete-total{color:var(--ink);}
.fact-client{display:flex;align-items:center;gap:7px;padding:11px 13px;min-width:0;}
.fact-client > .icon-btn{margin-left:auto;}
.fact-case{
  display:flex;align-items:center;justify-content:flex-end;
  padding:8px 13px;border-left:1.5px solid var(--ink-12);
}
.fact-case .money{width:100%;max-width:124px;}
.fact-case .money input{width:100%;font-size:13.5px;padding:6px 28px 6px 9px;}
.fact-total{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;}

/* Le pied reprend la somme de chaque colonne : c'est la ligne qu'on vient lire. */
.fact-pied{
  border-top:2px solid var(--ink);background:var(--surface-2);
  font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;
}
.fact-pied .fact-client{
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-60);font-weight:800;
}
.fact-pied .fact-case{padding:11px 13px;}

@media (max-width:860px){
  .fact-ligne{grid-template-columns:repeat(2,minmax(0,1fr));}
  .fact-entete{display:none;}
  .fact-case{justify-content:flex-start;}
  .fact-client{grid-column:1 / -1;border-bottom:1.5px solid var(--ink-12);}
}

/* Serveur, hébergement, maintenance : un tableau à deux colonnes, sous le
   mensuel, avec son propre total annuel. */
.serveurs{margin-top:34px;padding-top:26px;border-top:1.5px solid var(--ink-12);}
.serv-tete{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px;}
.serv-sous{margin:5px 0 0;font-size:12.5px;color:var(--ink-45);max-width:56ch;}
.serv-total{display:flex;align-items:baseline;gap:7px;white-space:nowrap;}
.serv-total span:first-child{font-size:21px;font-weight:800;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;}
.serv-total-unite{font-size:12px;font-weight:700;color:var(--ink-60);}

.serv-ligne{
  display:grid;grid-template-columns:minmax(170px,1fr) minmax(130px,180px) minmax(210px,270px);
  border-top:1.5px solid var(--ink-12);
}
.serv-ligne:first-child{border-top:0;}

/* Le client, et sous son nom le domaine facturé — un client peut en avoir
   plusieurs, chacun sur sa ligne. */
.serv-qui{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;}
.serv-domaine{
  border:0;background:none;padding:0;font-family:inherit;
  font-size:11.5px;color:var(--ink-45);width:100%;min-width:0;
}
.serv-domaine:focus{outline:none;color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.serv-domaine::placeholder{font-style:italic;color:var(--ink-25);}
.serv-client{align-items:center;}

/* La date d'échéance, et l'alerte quand elle approche. */
.serv-date{gap:9px;justify-content:flex-start;}
.serv-date input[type="date"]{width:150px;font-size:13px;padding:6px 8px;}
.serv-alerte{
  font-size:10.5px;font-weight:800;letter-spacing:.02em;color:var(--alert);
  text-transform:uppercase;white-space:nowrap;
}
.serv-alerte-vide{color:var(--ink-25);font-weight:700;text-transform:none;font-style:italic;}
.serv-ligne.est-imminente{background:var(--alert-soft);}
.serv-ligne.sans-date .fact-client{color:var(--ink-60);}

/* Le cumul de l'année, sous le mensuel. */
.fact-annuel{display:flex;align-items:baseline;gap:7px;flex:0 0 auto;margin-left:auto;}
.fact-annuel-nombre{font-size:19px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.fact-annuel-unite{font-size:12px;font-weight:700;color:var(--ink-60);}

/* Référencement : une page, c'est un intitulé et une URL — rien à cocher. */
.rec-page{position:relative;display:flex;flex-direction:column;gap:4px;}
/* La croix ne s'affiche que sur une place ouverte à la main et encore vide. */
.rec-page-moins{
  position:absolute;top:-6px;right:-6px;width:22px;height:22px;
  border-radius:50%;background:var(--surface);border:1.5px solid var(--ink-25);
  color:var(--ink-45);opacity:0;
}
.rec-page:hover .rec-page-moins,.rec-page-moins:focus{opacity:1;}
.rec-page-moins:hover{border-color:var(--alert);color:var(--alert);}
.rec-page .input{font-size:13px;padding:6px 9px;}
.rec-page .rec-titre{font-weight:700;}
.rec-page .rec-url{color:var(--ink-60);}
.rec-page.est-remplie .rec-titre{border-color:var(--ink-25);}

/* ---------------------------------------------------------- référencement */
/* Même disposition que la publicité : le client à gauche, ce qu'on écrit pour
   lui à droite, mois par mois. */
.seo-ligne{grid-template-columns:minmax(230px,1fr) minmax(0,2.4fr);}
.seo-pages{
  display:flex;flex-direction:column;gap:8px;align-items:stretch;
  padding:10px 13px;border-left:1.5px solid var(--ink-12);min-width:0;
}
.seo-ajouter{align-self:flex-start;}
.seo-client{align-items:center;}
.seo-qui{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto;}
.seo-reste{
  font-size:10.5px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-45);white-space:nowrap;
}
.seo-reste.est-complete{color:var(--go);}

@media (max-width:860px){
  .seo-ligne{grid-template-columns:minmax(0,1fr);}
  .seo-pages{border-left:0;border-top:1.5px solid var(--ink-12);}
}

/* ------------------------------------------------------------ publicité */
/* Le mois se change en haut : une campagne se juge sur le mois entier. */
.pub-mois{display:flex;align-items:center;gap:6px;margin-bottom:14px;}
.pub-mois-nom{min-width:150px;text-align:center;font-size:14.5px;font-weight:800;letter-spacing:-.01em;}

/* Le client tient sa colonne, ses publicités occupent tout le reste : c'est
   là qu'on écrit, la place doit aller de ce côté. */
.pub-ligne{grid-template-columns:minmax(230px,1fr) minmax(0,2.6fr);}
/* La cellule du client porte maintenant trois étages : qui, combien il a le
   droit de dépenser, et où il en est. */
.pub-client{flex-direction:column;align-items:stretch;gap:8px;}
.pub-client-tete{display:flex;align-items:center;gap:7px;min-width:0;}
.pub-client-tete .icon-btn{margin-left:auto;}

.pub-budget{display:flex;align-items:center;gap:8px;}
.pub-budget-label{font-size:10.5px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-45);}
.pub-budget .money{flex:0 0 auto;}
.pub-budget .money input{width:104px;font-size:13.5px;padding:5px 26px 5px 9px;}
.pub-herite{font-size:10.5px;font-style:italic;color:var(--ink-25);}

.pub-reste{display:flex;flex-direction:column;gap:5px;}
.pub-jauge{display:block;height:6px;border-radius:999px;background:var(--ink-12);overflow:hidden;}
.pub-jauge i{display:block;height:100%;background:var(--blue);transition:width .18s ease;}
.pub-reste.est-depasse .pub-jauge i{background:var(--alert);}
.pub-reste-texte{font-size:11.5px;color:var(--ink-45);font-variant-numeric:tabular-nums;}
.pub-reste-texte strong{color:var(--ink);font-weight:800;}
.pub-reste.est-depasse .pub-reste-texte strong{color:var(--alert);}

.pub-liste{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:10px 13px;border-left:1.5px solid var(--ink-12);min-width:0;
}
.pub-item{display:flex;align-items:center;gap:7px;width:100%;}
.pub-note{flex:1 1 auto;min-width:0;font-size:13.5px;padding:6px 9px;}
.pub-item .money{flex:0 0 auto;}
/* Le padding droit garde la place du « € » posé en absolu. */
.pub-item .money input{width:104px;font-size:13.5px;padding:6px 28px 6px 9px;}
.pub-item .icon-btn{flex:0 0 auto;color:var(--ink-45);}
.pub-item .icon-btn:hover{color:var(--alert);}
.pub-ajouter{align-self:flex-start;}

@media (max-width:860px){
  .pub-ligne{grid-template-columns:minmax(0,1fr);}
  .pub-liste{border-left:0;border-top:1.5px solid var(--ink-12);}
}

/* La feuille de brouillon : une page arrachée à un carnet, posée sous le
   tableau. Le léger travers et l'ombre portée la distinguent d'un champ de
   formulaire — on n'y remplit rien, on y jette des idées. */
.brouillon{
  margin-top:30px;padding:14px 15px 15px;
  border:1.5px solid var(--ink);border-radius:var(--r-m);
  background:color-mix(in srgb,var(--s-textile) 45%,var(--surface));
  transform:rotate(-.35deg);box-shadow:2px 3px 0 var(--ink-12);
}
.brouillon-tete{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;}
.brouillon-outils{display:flex;gap:4px;}
.brouillon-outil{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:26px;border-radius:var(--r-s);
  border:1.5px solid var(--ink-25);background:var(--surface);
  font-size:13px;font-weight:800;color:var(--ink-60);cursor:pointer;line-height:1;
}
.brouillon-outil:hover{border-color:var(--ink);color:var(--ink);}
.outil-titre{font-size:14px;}
.outil-case{
  display:block;width:12px;height:12px;border-radius:3px;border:1.8px solid currentColor;
}

/* La feuille grandit avec ce qu'on y écrit : on ne défile jamais à l'intérieur
   d'un brouillon, on le lit d'un bloc. */
.brouillon-zone{
  min-height:150px;padding:10px 12px;
  border:1.5px solid var(--ink-25);border-radius:var(--r-s);background:var(--surface);
  font-family:inherit;font-size:14px;line-height:1.55;color:var(--ink);
  overflow-wrap:anywhere;
}
.brouillon-zone:focus{border-color:var(--ink);outline:none;}
.brouillon-zone:empty::before{content:attr(data-vide);color:var(--ink-25);}
.brouillon-zone h3{
  margin:14px 0 5px;font-size:15.5px;font-weight:800;letter-spacing:-.01em;
}
.brouillon-zone h3:first-child{margin-top:0;}
.brouillon-zone ul,.brouillon-zone ol{margin:4px 0 4px 20px;}

/* Une tâche : la case n'est pas modifiable, elle se coche d'un clic. */
.brouillon-zone .tache{display:flex;align-items:flex-start;gap:8px;margin:3px 0;}
.brouillon-zone .case{
  flex:0 0 auto;width:15px;height:15px;margin-top:3px;cursor:pointer;
  border:1.8px solid var(--ink-45);border-radius:4px;background:var(--surface);
}
.brouillon-zone .tache[data-fait="1"]{color:var(--ink-45);text-decoration:line-through;}
.brouillon-zone .tache[data-fait="1"] .case{
  background:var(--ink);border-color:var(--ink);text-decoration:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23FFFCF5' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5l3.2 3.2L14 5.5'/%3E%3C/svg%3E");
  background-size:11px 11px;background-position:center;background-repeat:no-repeat;
}
.brouillon .hint{margin:7px 0 0;font-size:11.5px;color:var(--ink-60);}

/* ------------------------------------------------------- historique des pages */
.archive-seo{display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto;}
.archive-ligne{display:flex;align-items:baseline;gap:10px;font-size:13px;}
.archive-mois{flex:0 0 68px;font-weight:700;color:var(--ink-45);
  text-transform:uppercase;font-size:10.5px;letter-spacing:.06em;}
.archive-url{flex:1 1 auto;min-width:0;color:var(--blue);text-decoration:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.archive-url:hover{text-decoration:underline;}
.archive-vide{color:var(--ink-45);font-style:italic;}

@media (max-width:900px){
  /* En écran étroit, chaque période passe sous le client. */
  .rec-ligne{grid-template-columns:minmax(0,1fr);}
  .rec-entete{display:none;}
  .rec-cellule{border-left:0;border-top:1.5px solid var(--ink-12);}
  .rec-cellule::before{
    content:attr(data-periode);display:block;
    font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-45);
  }
}

/* ------------------------------------------------------------------ modale */
.modal{
  position:fixed;z-index:60;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(460px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow-y:auto;
  padding:22px;border:2px solid var(--ink);border-radius:var(--r-l);
  background:var(--surface);box-shadow:var(--shadow-3);
}
.modal h2{font-size:20px;font-weight:800;letter-spacing:-.015em;margin-bottom:4px;}
.modal .modal-sub{font-size:13.5px;color:var(--ink-60);margin-bottom:18px;}
.modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}

/* ------------------------------------------------------------------- menu */
.menu{
  position:absolute;z-index:70;min-width:210px;padding:6px;
  border:1.5px solid var(--ink);border-radius:var(--r-m);background:var(--surface);box-shadow:var(--shadow-2);
  /* Le menu du travail récurrent est long : sur un écran bas, il défile au
     lieu de sortir de la fenêtre. */
  max-height:min(70vh,560px);overflow-y:auto;
}
.menu button{
  display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer;
  padding:8px 10px;border:0;border-radius:var(--r-s);background:none;font-size:13.5px;font-weight:600;
}
.menu button:hover{background:var(--ink-06);}
.menu button.danger{color:var(--alert);}
.menu .menu-label{padding:8px 10px 4px;font-size:10.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-45);}
.menu .menu-sep{height:1.5px;background:var(--ink-12);margin:5px 0;}

/* ------------------------------------------------------------------ toasts */
.toasts{position:fixed;z-index:80;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;}
.toast{
  padding:10px 18px;border-radius:999px;border:1.5px solid var(--ink);
  background:var(--ink);color:var(--surface);font-size:13.5px;font-weight:600;
  box-shadow:var(--shadow-2);animation:pop .2s ease;
}
.toast.err{background:var(--alert);border-color:var(--alert);}
@keyframes pop{from{transform:translateY(8px);opacity:0;}to{transform:none;opacity:1;}}

/* ---------------------------------------------------------------- connexion */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:22px;}
.login-card{
  width:min(392px,100%);padding:32px 30px 28px;
  border:2px solid var(--ink);border-radius:24px;background:var(--surface);box-shadow:0 22px 50px rgba(24,33,42,.14);
}
.login-card .brand-mark{color:var(--ink);height:26px;margin-bottom:22px;}
.login-card h1{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-bottom:5px;}
.login-card .sub{font-size:13.5px;color:var(--ink-60);margin-bottom:22px;}
.login-error{
  padding:10px 13px;border-radius:var(--r-s);background:var(--alert-soft);
  border:1.5px solid rgba(211,57,42,.3);color:var(--alert);font-size:13.5px;font-weight:600;margin-bottom:16px;
}
.login-card .btn{width:100%;justify-content:center;margin-top:6px;}
.login-rester{display:flex;align-items:center;gap:9px;margin:2px 0 12px;font-size:13.5px;color:var(--ink-80);cursor:pointer;}
.login-rester input{width:17px;height:17px;accent-color:var(--ink);margin:0;}
.login-signpost{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:26px;}

/* -------------------------------------------------------------- responsive */
@media (max-width:1080px){
  /* Plus la place pour une colonne latérale : le tri repasse en pleine largeur. */
  .plateau{grid-template-columns:minmax(0,1fr);}
  .board{grid-template-columns:repeat(2,minmax(0,1fr));}
  .col-body.col-body-grille{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
  .search input{width:150px;}
}
@media (max-width:720px){
  /* La barre passe sur deux lignes : marque + actions, puis la navigation. */
  .topbar{height:auto;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 12px 0;}
  .brand{order:1;}
  .topbar-right{order:2;margin-left:auto;}
  .nav{order:3;flex:1 1 100%;padding-bottom:2px;}
  .brand span{display:none;}
  .search{display:none;}
  .cal{min-width:660px;}
  .board{grid-template-columns:minmax(0,1fr);}
  .col-body.col-body-grille{grid-template-columns:minmax(0,1fr);}
  .board-cours{margin-bottom:20px;}
  .page{padding:16px 12px 70px;}
  .grid-2{grid-template-columns:1fr;}
  .cal-day{min-height:76px;}
  .cal-ev{font-size:10.5px;}
  /* Sur téléphone, la semaine s'empile : sept colonnes ne tiennent pas. */
  .semaine{grid-template-columns:minmax(0,1fr);}
  .jour-num{margin-left:0;}
  .jour-marque{flex:0 0 auto;margin-left:auto;}
  .jour-vide{display:none;}
  .jour-corps{min-height:0;}
}
/* --------------------------------------------------------------- impression
   Kilian imprime une fiche et l'emmène à la machine : on ne sort que celle-là.
   On masque par « visibility » et non par « display » : la fiche visée est
   imbriquée dans des conteneurs qu'il faut donc laisser en place. */
/* --------------------------------------------------------- bon de commande

   Un document, pas une capture d'écran : il ne vit qu'à l'impression, et il
   est construit pour le papier — noir sur blanc, une colonne, des repères qui
   se lisent à l'atelier comme chez le client. */
#impression{display:none;}

.bon{color:#18212A;font-size:11pt;line-height:1.45;}
.bon-tete{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding-bottom:10mm;border-bottom:2px solid #18212A;
}
.bon-logo{width:38mm;height:auto;display:block;}
.bon-titre{text-align:right;}
.bon-type{font-size:16pt;font-weight:800;letter-spacing:-.01em;line-height:1.1;}
.bon-ref{margin-top:2mm;font-size:9.5pt;font-weight:600;color:#5a6472;}

.bon-infos{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4mm 10mm;
  padding:7mm 0;border-bottom:1px solid #c9ced5;
}
.bon-label{
  display:block;font-size:8pt;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#77808d;margin-bottom:1mm;
}
.bon-champ strong{font-size:11.5pt;font-weight:700;}
.bon-second{display:block;font-size:9.5pt;font-weight:500;color:#5a6472;}

.bon-table{width:100%;border-collapse:collapse;margin-top:6mm;}
.bon-table th{
  padding:0 0 2mm;border-bottom:1px solid #18212A;text-align:left;
  font-size:8pt;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#77808d;
}
.bon-table td{padding:4mm 0;border-bottom:1px solid #e2e5e9;vertical-align:top;}
.bon-table tbody tr{break-inside:avoid;}
.bon-num{width:8mm;font-size:9pt;font-weight:800;color:#a7aeb8;}
.bon-qte{width:16mm;text-align:right;font-size:13pt;font-weight:800;font-variant-numeric:tabular-nums;}
.bon-prix{width:28mm;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;}
.bon-pu{font-size:8.5pt;font-weight:500;color:#77808d;}
.bon-produit{font-size:12pt;font-weight:800;}
.bon-couleur{font-size:10pt;font-weight:600;color:#5a6472;}
.bon-precision{font-size:9.5pt;color:#5a6472;margin-top:.5mm;}
.bon-tailles{display:flex;flex-wrap:wrap;gap:2mm;margin-top:2mm;}
.bon-tailles span{
  border:1px solid #c9ced5;border-radius:2mm;padding:.8mm 2mm;
  font-size:9pt;font-variant-numeric:tabular-nums;
}
.bon-tailles b{font-weight:800;}
.bon-note{
  margin-top:2mm;padding:2mm 3mm;border-left:2px solid #18212A;
  font-size:9.5pt;font-style:italic;color:#3a434f;
}
.bon-fourni{margin-top:2mm;font-size:9pt;font-weight:700;}
.bon-table tfoot td{
  padding-top:4mm;border-bottom:0;border-top:2px solid #18212A;
  font-size:12pt;font-weight:800;
}
.bon-pied{
  display:flex;justify-content:space-between;gap:10mm;margin-top:10mm;
  padding-top:4mm;border-top:1px solid #c9ced5;
  font-size:8.5pt;color:#77808d;
}

@media print{
  @page{margin:14mm;}
  body{background:#fff;}
  .topbar,.toasts,.scrim,.drawer,.menu,.modal,.no-print{display:none!important;}
  .page{padding:0;}

  /* À l'impression d'un bon, la page s'efface : il ne reste que le document. */
  body.printing > *{display:none!important;}
  body.printing #impression{display:block!important;}
  body.printing{background:#fff;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;}
}

/* Une tâche qui revient porte un petit ↻ discret. */
.tache-rec{flex:none;font-size:12px;line-height:1;color:var(--muted,#8a8a8a);}
.tache-rec-note{margin:-6px 0 14px;font-size:12.5px;}
.lien-btn{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer;}
.lien-btn:hover{color:var(--ink,#111);}

/* ---------- planning, la semaine personne par personne ---------- */
.qui-plan{display:grid;grid-template-columns:132px repeat(7,minmax(0,1fr));gap:6px;align-items:stretch;}
.qui-tete,.qui-ligne{display:contents;}
.qui-coin{}
.qui-jour{display:flex;align-items:baseline;gap:6px;padding:0 4px 6px;
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#8a8a8a);}
.qui-jour-num{font-size:15px;font-weight:600;letter-spacing:0;color:var(--ink,#1a1a1a);}
.qui-jour.est-aujourdhui{color:var(--accent,#3e93ee);}
.qui-jour.est-aujourdhui .qui-jour-num{color:var(--accent,#3e93ee);}
.qui-jour.est-passe{opacity:.55;}
.qui-nom{display:flex;align-items:center;gap:8px;padding:10px 6px;font-weight:600;
  position:sticky;left:0;background:var(--bg,#faf7f2);}
.qui-case{position:relative;display:flex;flex-direction:column;gap:6px;min-height:64px;
  padding:8px;border:1px solid var(--line,#e7e2d8);border-radius:12px;background:var(--card,#fff);}
.qui-case.est-aujourdhui{border-color:var(--accent,#3e93ee);}
.qui-case.est-passe{background:transparent;}
.qui-case.jour-cible{background:rgba(62,147,238,.10);}
/* Une case est étroite : le titre s'y met sur deux lignes plutôt que de se
   couper au troisième caractère. */
.qui-case .tache{font-size:12.5px;align-items:flex-start;}
.qui-case .tache .tache-corps{flex-wrap:wrap;align-items:flex-start;row-gap:2px;}
/* Dans une case étroite, l'heure prend sa ligne et se lit d'abord. */
.qui-case .tache-heure{flex:1 0 100%;font-size:12px;color:var(--ink);}
.qui-case .tache.est-faite .tache-heure{color:var(--ink-45);}
.qui-case .tache .tache-titre,.qui-case .qui-rendu span:not(.dot){
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  white-space:normal;overflow:hidden;line-height:1.3;}
.qui-case .qui-rendu{white-space:normal;align-items:flex-start;}
.qui-case .qui-rendu .dot{margin-top:5px;}
.qui-rendu{display:flex;align-items:center;gap:6px;width:100%;padding:5px 7px;border:0;border-radius:8px;
  background:var(--soft,#f3efe7);font:inherit;font-size:12.5px;text-align:left;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qui-rendu .dot{flex:none;width:7px;height:7px;border-radius:50%;}
.qui-rendu.est-retard{background:rgba(214,69,69,.12);color:#a32020;}
.qui-charge{align-self:flex-start;font-size:11px;color:var(--muted,#8a8a8a);}
.qui-ajouter{position:absolute;right:5px;bottom:5px;width:22px;height:22px;display:grid;place-items:center;
  border:0;border-radius:7px;background:transparent;color:var(--muted,#8a8a8a);opacity:0;cursor:pointer;}
.qui-case:hover .qui-ajouter,.qui-ajouter:focus-visible{opacity:1;}
.qui-ajouter:hover{background:var(--soft,#f3efe7);color:var(--ink,#1a1a1a);}
@media (max-width:820px){
  /* Sur téléphone, chaque personne devient un bloc et ses jours s'empilent. */
  .qui-plan{display:block;}
  .qui-ligne{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin-bottom:18px;}
  .qui-tete{display:none;}
  .qui-case::before{content:attr(data-jour);font-size:11px;color:var(--muted,#8a8a8a);}
  .qui-case{min-height:0;}
  .qui-case:not(:has(.tache,.qui-rendu)){display:none;}
}
.agenda-jourentier .tache-heure-libre{display:none;}
.qui-case .tache-heure-libre{font-size:10px;font-weight:600;color:var(--ink-45);}

/* ---------- Mon espace : les notes en bandeau ---------- */
/* Sur toute la largeur, la saisie à gauche et les notes à côté, sur autant de
   colonnes que la place en laisse. */
.espace-notes .notes-rapides{display:grid;grid-template-columns:300px minmax(0,1fr);gap:4px 22px;align-items:start;}
.espace-notes .notes-tete{grid-column:1 / -1;}
.espace-notes .capture-note{grid-column:1;grid-row:2 / span 3;margin-bottom:0;}
.espace-notes .pense-liste,.espace-notes .pense-vide{grid-column:2;}
.espace-notes .pense-liste:not(.pense-faites){display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 14px;}
.espace-notes .pense-faites{margin-top:8px;}
@media (max-width:820px){
  .espace-notes .notes-rapides{display:block;}
  .espace-notes .capture-note{margin-bottom:12px;}
}

/* La poignée d'une note : on la prend pour poser la note dans la journée. */
.pense-poignee{flex:0 0 auto;margin-top:4px;width:10px;font-size:12px;line-height:1;letter-spacing:-3px;
  color:var(--ink-25);cursor:grab;opacity:0;user-select:none;}
.pense:hover .pense-poignee{opacity:1;}
.pense-poignee:active{cursor:grabbing;}
.pense.dragging{opacity:.45;}
@media (hover:none){ .pense-poignee{display:none;} }

/* ---------- Mon espace : ma journée ---------- */
.journee-tete{display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.journee-titre{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0;text-align:center;}
.journee-titre strong{font-size:15px;}
.journee-aide{margin:0 0 8px;font-size:11.5px;color:var(--ink-45);}
.journee .agenda{grid-template-columns:52px minmax(0,1fr);}
.journee .agenda-heure{padding:5px 7px 0;}
.journee-libres{margin-bottom:10px;}

/* Le bord bas d'une tâche posée : on le tire pour changer la durée. */
.tache-etirer{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize;}
.tache-etirer::after{content:"";position:absolute;left:50%;bottom:2px;width:22px;height:3px;margin-left:-11px;
  border-radius:2px;background:var(--ink-25);opacity:0;transition:opacity .12s;}
.tache-posee:hover .tache-etirer::after{opacity:1;}
body.en-etirement,body.en-etirement *{cursor:ns-resize !important;user-select:none;}
/* Un projet de Mon espace se prend pour être posé dans la journée. */
.row[data-planifier]{cursor:grab;}
.row[data-planifier].dragging{opacity:.5;}
.tache-projet{margin:-4px 0 12px;font-size:13px;}

/* Tâches d'agenda : des rectangles à angles doux, bordés à gauche de la
   couleur de qui s'en occupe. */
.tache{border-radius:5px;border-left:3px solid var(--c,var(--ink-25));padding-left:7px;}
.tache-posee{border-radius:5px;border-color:var(--ink-12);border-left:3px solid var(--c,var(--ink-25));
  background:color-mix(in srgb,var(--c,var(--blue)) 10%,var(--surface));box-shadow:0 1px 2px var(--ink-06);}
.tache-posee:hover{border-color:var(--ink-25);border-left-color:var(--c,var(--ink-25));}
.tache .check{border-radius:4px;}
.tache.est-faite{border-left-color:var(--ink-12);}
.tache-courte{padding-top:1px;padding-bottom:1px;align-items:center;}
.tache-courte .tache-corps{flex-wrap:nowrap;align-items:center;}
.tache-courte .tache-titre{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tache-courte .check{width:14px;height:14px;}

/* La description d'une commande, sous l'en-tête de sa fiche. */
.fiche-description{margin:12px 16px 4px;padding:10px 12px;border-radius:6px;background:var(--ink-06);
  font-size:13px;line-height:1.5;color:var(--ink-80);white-space:pre-line;overflow-wrap:anywhere;}
@media print{ .fiche-description{background:none;border:1px solid #ccc;} }


/* Le type de marquage, juste sous le client : c'est la première chose que
   l'atelier doit savoir avant de prendre une pièce. */
.fiche-marquage{margin-top:3px;font-size:15px;font-weight:700;letter-spacing:-.005em;color:var(--ink-80);}
.fiche-marquage.est-vide{font-weight:600;color:var(--ink-45);font-style:italic;}

/* ---------- lignes d'article : l'essentiel d'abord ---------- */
/* La couleur devient une simple mention avec sa pastille, le reste une ligne
   de texte : c'est la fiche entière qui gagne en lisibilité. */
.item-line{padding:11px 16px;}
.item-line-top{gap:8px;}
.item-couleur{padding:0;border:0;background:none;font-size:12.5px;font-weight:600;color:var(--ink-60);}
.item-marq{font-weight:600;color:var(--ink-45);}
/* La note de logo tient sur une ligne ; elle s'ouvre en entier au survol. */
.item-logo{margin-top:6px;padding:0 0 0 9px;background:none;border-radius:0;
  font-size:12.5px;color:var(--ink-60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item-visuel{margin-top:6px;padding:2px 8px 2px 2px;border-radius:6px;font-size:11px;}
.item-visuel img{width:18px;height:18px;border-radius:4px;}
.item-visuel svg{width:13px;height:13px;margin-left:5px;}
@media print{ .item-logo{white-space:normal;} }

.pill-rapide{background:var(--ink-06);color:var(--ink-60);}

/* Mon espace : la gestion de projet d'abord, les devis ensuite. */
.espace-bloc{margin-bottom:4px;}
.espace-bloc-titre{margin:0 0 12px;font-size:12px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-45);}

/* ------------------------------------------------------------ lien vers les mails */
.lien-mails{position:relative;text-decoration:none;}
.lien-mails .nav-badge{
  display:inline-block;margin-left:2px;min-width:17px;padding:0 4px;border-radius:9px;
  background:var(--alert);color:#fff;font-size:10px;line-height:17px;text-align:center;
}
@media (max-width:640px){ .lien-mails{padding:6px 9px;font-size:0;gap:0;} .lien-mails .nav-badge{font-size:10px;margin-left:4px;} }
.mails-projet{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;}
.mails-projet a,.mails-projet-autre{
  display:flex;align-items:flex-start;gap:9px;padding:8px 10px;border:1.5px solid var(--ink-12);border-radius:var(--r-s);
  background:var(--surface);text-decoration:none;color:var(--ink);
}
.mails-projet a:hover{border-color:var(--ink);}
.mails-projet svg{flex:0 0 auto;margin-top:2px;color:var(--ink-45);}
.mails-projet span{display:flex;flex-direction:column;min-width:0;}
.mails-projet b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mails-projet small{font-size:12px;color:var(--ink-45);}
.mails-projet-autre{color:var(--ink-60);}

/* LinkedIn et TikTok ont leur propre post : leurs cases se détachent de
   celles de la semaine. */
.rec-case-apart{margin-top:2px;}
.rec-case-premiere{margin-top:4px;padding-top:6px;border-top:1.5px dashed var(--ink-12);}
.rec-case .reseau{flex:0 0 auto;}

/* Le nom de ce qui se coche à part : le réseau, la prospection, les ads. */
.rec-apart-nom{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  letter-spacing:.02em;color:var(--c,var(--ink-45));}
.rec-apart-nom svg{width:13px;height:13px;fill:currentColor;}

/* =========================================================================
   Charte 2026 : l'outil prend l'identité du site agence-syou.fr.
   Papier crème à pois, titres Chunk en capitales, étiquettes Instrument Serif
   à petite queue, contours encre et ombres décalées de la couleur du métier.
   Cette couche se pose par-dessus les règles d'origine : pour revenir en
   arrière, il suffit de la retirer et de remettre les anciennes polices.
   ========================================================================= */
:root{
  --paper:#FFF8EB;
  --surface:#FFFDF8;
  --surface-2:#F6EAD2;
  --blue:#56B5FF;
  --alert:#E2412F;
  --alert-soft:#FFE6DF;

  --s-logo:#FFA3CB;
  --s-web:#56B5FF;
  --s-seo:#FF9983;
  --s-social:#8CEFBC;
  --s-ads:#FFB987;
  --s-textile:#FFD773;
  --s-objet:#FFD773;
  --s-autre:#F6EAD2;

  --e-attente:#FFB987;   --e-attente-doux:#FFF1E4;
  --e-production:#56B5FF; --e-production-doux:#EAF5FF;
  --e-pret:#8CEFBC;      --e-pret-doux:#E9FBF1;

  --f-titre:'Chunk','Arial Black',Impact,sans-serif;
  --f-serif:'Instrument Serif',Georgia,serif;
  --queue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1354 426 141 143'%3E%3Cpath d='M1490.27 426.925C1487.76 426.344 1485.18 427.574 1484.04 429.892C1470.5 457.596 1452.93 482.59 1431.68 504.23C1410.13 526.167 1385.11 544.343 1357.2 558.321C1354.91 559.472 1353.7 562.051 1354.29 564.552C1354.88 567.053 1357.11 568.821 1359.68 568.821H1477.94C1487.12 568.821 1494.57 561.375 1494.57 552.191V432.325C1494.57 429.745 1492.79 427.507 1490.27 426.925Z'/%3E%3C/svg%3E");

  --r-s:9px; --r-m:16px; --r-l:22px;
  --coin-s:9px 9px 3px 9px;
  --coin-m:16px 16px 5px 16px;
  --coin-l:22px 22px 6px 22px;
  --head-h:70px;
}
body{background-size:18px 18px;background-image:radial-gradient(var(--ink-12) 1.1px,transparent 1.5px);}
::selection{background:var(--s-textile);}

/* ---------- entête ---------- */
.topbar{border-bottom-width:2.5px;}
@media (min-width:721px){ .topbar{gap:18px;padding:0 max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px));} }
.brand{gap:12px;}
.brand img,.brand svg{height:25px;width:auto;}
.brand span{
  position:relative;padding:4px 11px 6px;border:0;border-radius:6px 6px 15px 6px;
  background:var(--blue);color:var(--ink);transform:rotate(-3deg);margin-top:4px;
  font-family:var(--f-serif);font-size:21px;font-weight:400;letter-spacing:0;text-transform:lowercase;line-height:1;
}
.brand span::after{
  content:"";position:absolute;right:-6px;bottom:-6px;width:14px;height:14px;background:var(--blue);
  -webkit-mask:var(--queue) center/contain no-repeat;mask:var(--queue) center/contain no-repeat;
}
.nav{gap:4px;padding:6px 8px 8px 2px;}
.nav button{
  padding:8px 12px;border-radius:12px 12px 4px 12px;
  font-size:14.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);
  transition:background-color .15s ease,box-shadow .15s ease;
}
.nav button:hover{background:var(--surface-2);}
.nav button[aria-current="true"]{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--blue);}
.nav button[aria-current="true"]::after{display:none;}
/* Sur un écran de portable, les huit onglets doivent tenir sans défiler : la
   recherche se replie en loupe (elle s'ouvre au clic) et les onglets se
   resserrent. Sans ça, « Clients » et « Récurrent » sortaient de la barre. */
@media (min-width:1081px) and (max-width:1600px){
  .nav{gap:2px;}
  .nav button{padding:7px 9px;font-size:14px;}
  .search input{width:40px;padding-right:0;cursor:pointer;}
  .search input::placeholder{color:transparent;}
  .search input:focus{width:220px;padding-right:12px;cursor:text;}
  .search input:focus::placeholder{color:var(--ink-45);}
}
@media (min-width:1081px) and (max-width:1340px){
  .brand span{display:none;}
  .nav button{padding:7px 8px;font-size:13.5px;}
}
.nav .nav-badge{min-width:19px;height:19px;line-height:19px;border-radius:999px;font-size:11.5px;font-weight:700;margin-left:7px;}
.nav button[aria-current="true"] .nav-badge{box-shadow:0 0 0 2px var(--ink);}
.search input{border:2px solid var(--ink);background:var(--paper);font-size:14px;font-weight:500;}
.search input:focus{background:var(--surface);box-shadow:3px 3px 0 var(--blue);}
.search svg{color:var(--ink);}

/* ---------- boutons ---------- */
.btn{
  padding:9px 16px;border:2px solid var(--ink);border-radius:14px 14px 4px 14px;background:var(--surface);
  font-size:14px;font-weight:600;letter-spacing:0;box-shadow:3px 3px 0 var(--ink);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink);}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--blue);}
.btn-primary:hover{background:var(--ink);box-shadow:5px 5px 0 var(--blue);}
.btn-ghost{border-color:transparent;box-shadow:none;}
.btn-ghost:hover{box-shadow:none;transform:none;}
.btn-danger{box-shadow:3px 3px 0 var(--alert);}
.btn-sm{padding:6px 12px;font-size:13px;}
.icon-btn{border-radius:9px 9px 3px 9px;}

/* ---------- les personnes : leur photo, comme sur le site ---------- */
.who{
  gap:7px;padding:2px 10px 2px 2px;border:1.5px solid var(--ink);background:var(--surface);
  font-size:13px;font-weight:500;
}
.who i,.who-dot{
  width:22px;height:22px;border:1.5px solid var(--ink);background:var(--c) center/cover no-repeat;
}
.who i.a-photo,.who-dot.a-photo,.who-swatch.a-photo{background-color:var(--surface-2);}
.who-none{padding:3px 10px;border-color:var(--ink-45);}
.who-btn{padding:3px 12px 3px 3px;font-size:14px;font-weight:600;border-width:2px;}
.who-btn i{width:28px;height:28px;}
.who-btn:hover{background:var(--surface-2);}
.who-dot{width:20px;height:20px;}
.who-swatch{width:46px;height:46px;border-radius:50%;border:2px solid var(--ink);background:var(--c) center/cover no-repeat;}

/* ---------- étiquettes de prestation : le badge du site, avec sa queue ---------- */
.tag{
  position:relative;padding:3px 9px 5px;border:0;border-radius:5px 5px 11px 5px;box-shadow:none;
  font-family:var(--f-serif);font-size:18px;line-height:1;transform:rotate(-1.5deg);
}
.tag::after{
  content:"";position:absolute;right:-6px;bottom:-6px;width:12px;height:12px;background:var(--c);
  -webkit-mask:var(--queue) center/contain no-repeat;mask:var(--queue) center/contain no-repeat;
}

/* ---------- pastilles ---------- */
.pill{padding:3px 9px;font-size:12px;font-weight:600;letter-spacing:0;border:1.5px solid transparent;}
.pill-late{background:transparent;color:var(--alert);padding-inline:0;}
.pill-wait{background:var(--ink);color:var(--paper);border-radius:6px 6px 11px 6px;}
.pill-relance{background:var(--alert);color:#fff;}
.pill-done{background:var(--e-pret);color:var(--ink);border-color:var(--ink);}
.pill-rapide{background:var(--s-social);color:var(--ink);border-color:var(--ink);}
.pill-tarif{border-color:var(--ink);}

/* ---------- pages ---------- */
.page{padding:34px max(16px,env(safe-area-inset-right,0px)) 80px max(16px,env(safe-area-inset-left,0px));max-width:1520px;margin-inline:auto;}
@media (min-width:721px){ .page{padding-inline:max(24px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-left,0px));} }
.page-head{align-items:flex-end;gap:16px 40px;margin-bottom:30px;}
.page-head > div:first-child{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:48px;align-items:end;flex:1 1 560px;min-width:0;}
.page-head > div:first-child > :not(.page-sub){grid-column:1;}
.page-head > div:first-child > .page-sub{grid-column:2;grid-row:1 / span 3;align-self:end;justify-self:end;max-width:40ch;margin:0;}
@media (max-width:980px){
  .page-head > div:first-child{grid-template-columns:minmax(0,1fr);}
  .page-head > div:first-child > .page-sub{grid-column:1;grid-row:auto;justify-self:start;margin-top:12px;}
}
.badge-vue{
  --c:var(--s-textile);position:relative;justify-self:start;width:fit-content;margin-bottom:18px;
  padding:6px 13px 8px;border-radius:6px 6px 15px 6px;background:var(--c);color:var(--ink);
  font-family:var(--f-serif);font-size:24px;line-height:1;white-space:nowrap;transform:rotate(-2.5deg);
}
.badge-vue::after{
  content:"";position:absolute;right:-8px;bottom:-8px;width:17px;height:17px;background:var(--c);
  -webkit-mask:var(--queue) center/contain no-repeat;mask:var(--queue) center/contain no-repeat;
}
.badge-blue{--c:var(--s-web);}   .badge-green{--c:var(--s-social);} .badge-pink{--c:var(--s-logo);}
.badge-coral{--c:var(--s-seo);}  .badge-violet{--c:#B69CFF;}       .badge-paper{--c:var(--surface-2);}
.page-title{
  font-family:var(--f-titre);font-weight:400;text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(40px,5vw,66px);line-height:.92;text-wrap:balance;
}
.page-sub{margin-top:10px;font-family:var(--f-serif);font-size:clamp(19px,1.8vw,24px);line-height:1.15;color:var(--ink-60);}
.page-sub strong{font-family:'General Sans',sans-serif;font-size:.8em;color:var(--ink);}
.chip{border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);font-weight:500;}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none;}
.empty{padding:26px 18px;border:2px dashed var(--ink-25);border-radius:var(--coin-l);background:rgba(255,253,248,.6);
  font-family:var(--f-serif);font-size:19px;line-height:1.2;color:var(--ink-60);}
.empty strong{font-family:var(--f-titre);font-weight:400;text-transform:uppercase;font-size:20px;color:var(--ink);margin-bottom:6px;}

/* ---------- titres de colonnes et de groupes ---------- */
.col-head{gap:12px;padding:0 0 4px;border-bottom:0;margin-bottom:18px;}
.col-name,.group-title{
  font-family:var(--f-titre);font-weight:400;text-transform:uppercase;letter-spacing:-.005em;
  font-size:clamp(22px,2.2vw,30px);line-height:1;color:var(--ink);
}
.col-count{min-width:30px;height:30px;line-height:30px;padding:0 9px;border-radius:999px;font-size:14px;font-weight:600;}
.col-ajouter{opacity:1;width:34px;height:34px;border:2px solid var(--ink);border-radius:11px 11px 3px 11px;
  background:var(--surface);box-shadow:2px 2px 0 var(--ink);color:var(--ink);}
.group-head{gap:12px;margin-bottom:18px;}
.group-rule{height:0;border-top:2px dashed var(--ink-12);background:none;}
.board-cours{margin-bottom:58px;}
.board{column-gap:30px;row-gap:30px;}
.col-body{gap:16px;}
.col-body.col-body-grille{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px 20px;}
@media (min-width:1081px){ .plateau{grid-template-columns:minmax(0,1fr) 310px;gap:30px;} }
@media (max-width:1080px){ .plateau{gap:44px;} }
.plateau-tri .col-name{font-size:22px;color:var(--ink);}
.plateau-tri .col-count{height:26px;min-width:26px;line-height:26px;font-size:13px;}

/* ---------- la carte d'un projet ---------- */
.card{
  --c:var(--surface-2);
  display:flex;flex-direction:column;
  padding:15px 16px 13px;border:2px solid var(--ink);border-radius:18px 18px 6px 18px;
  background:var(--surface);box-shadow:5px 5px 0 var(--c);
  transition:transform .18s ease,box-shadow .18s ease;
}
.card:hover{transform:translate(-2px,-2px);border-color:var(--ink);box-shadow:7px 7px 0 var(--c);}
.svc-web{--c:var(--s-web);}     .svc-logo{--c:var(--s-logo);}   .svc-seo{--c:var(--s-seo);}
.svc-social{--c:var(--s-social);} .svc-ads{--c:var(--s-ads);}   .svc-textile{--c:var(--s-textile);}
.svc-objet{--c:var(--s-objet);} .svc-autre{--c:var(--s-autre);}
.card-top{align-items:center;justify-content:flex-start;margin-bottom:9px;}
.card-top > span:empty{display:none;}
.card-tag{order:0;justify-content:flex-start;gap:8px 12px;margin-top:0;transform:none;}
.card:nth-child(even) .card-tag{transform:none;}
.card-top .cmark-nu{order:2;margin-left:auto;}
.card-top .cmark-nu img{height:30px;}
.card-nom{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);margin-bottom:4px;}
.card-title{font-size:17px;font-weight:600;line-height:1.25;color:var(--ink);text-wrap:pretty;}
.card-foot{margin-top:auto;padding-top:11px;gap:6px 10px;border-top:1.5px dashed var(--ink-12);}
.card-title + .card-foot{margin-top:12px;}
.card.is-waiting{background-image:repeating-linear-gradient(-45deg,var(--surface) 0 9px,#F9EFDC 9px 18px);}
.card.is-waiting::before{display:none;}
.card.is-late{border-color:var(--ink);}
.card.is-relance{border-color:var(--alert);background:var(--alert-soft);box-shadow:5px 5px 0 var(--alert);}
.card.is-urgent{border-color:var(--alert);border-width:2.5px;box-shadow:5px 5px 0 var(--alert);}
.card.is-urgent:hover,.card.is-relance:hover{box-shadow:7px 7px 0 var(--alert);}
.plateau-tri .card{box-shadow:3px 3px 0 var(--c);border-radius:12px 12px 4px 12px;}

/* ---------- à trier, pour nous ---------- */
.capture{border:2px dashed var(--ink-25);border-radius:var(--coin-l);background:rgba(255,253,248,.75);transform:none;box-shadow:none;}
.capture label{font-size:11px;letter-spacing:.08em;color:var(--ink-60);}
.capture textarea,.idee-texte:focus{border:1.5px solid var(--ink-12);border-radius:12px 12px 4px 12px;}
.capture textarea:focus{border-color:var(--ink);box-shadow:3px 3px 0 var(--blue);}
.idees{padding:18px;border:2px solid var(--ink);border-radius:var(--coin-l);box-shadow:5px 5px 0 var(--ink);}
.idees .col-name{font-size:24px;}
/* Dans un bloc qui a déjà son cadre, la saisie n'en ajoute pas un second. */
.capture-idee,.notes-rapides .capture{transform:none;border:0;background:none;padding:0;box-shadow:none;}
.idees .capture textarea{border-color:var(--ink);}
.idee{background:var(--surface);border:1.5px solid var(--ink);border-radius:10px 10px 3px 10px;padding:7px 9px;margin-bottom:6px;}
.idee-texte{font-size:14px;font-weight:600;}
.idee.est-faite{background:rgba(255,253,248,.45);border-style:dashed;}

/* ---------- cases à cocher ---------- */
.check{width:22px;height:22px;border:2px solid var(--ink);border-radius:7px 7px 2px 7px;}
.check[aria-checked="true"]{background:var(--e-pret);border-color:var(--ink);color:var(--ink);}

/* ---------- listes ---------- */
.row{border:2px solid var(--ink);border-radius:14px 14px 4px 14px;}
.row:hover{border-color:var(--ink);transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink);}
.row.is-late{border-color:var(--alert);}
.row-title{font-weight:600;}
.cmini{border:1.5px solid var(--ink);border-radius:999px;font-weight:500;}
.cmini:hover{box-shadow:2px 2px 0 var(--ink);}

/* ---------- équipe ---------- */
.lanes{gap:22px;}
.lane{background:var(--surface);border:2px solid var(--ink);border-radius:18px 18px 6px 18px;box-shadow:4px 4px 0 var(--surface-2);}
.lane-equipe{background:none;border:0;box-shadow:none;padding:0;}
.lane-equipe .lane-head{
  margin-bottom:14px;padding:13px 14px;background:var(--c,var(--surface-2));
  border:2px solid var(--ink);border-radius:18px 18px 6px 18px;box-shadow:4px 4px 0 var(--ink);
}
.lane-equipe .lane-job{color:var(--ink);}
.lane-equipe .lane-count{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 9px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600;}
.lane-equipe .who-swatch{background-color:var(--surface);}
.lane .row{border-width:1.5px;border-left:7px solid var(--c,var(--ink));border-radius:12px 12px 3px 12px;background:var(--surface);}
.lane .row.svc-aucun{border-left-color:var(--ink-25);}
.svc-aucun{--c:var(--surface-2);}
.lane-name{font-family:var(--f-titre);font-weight:400;text-transform:uppercase;font-size:24px;line-height:.95;letter-spacing:-.005em;}
.lane-job{font-family:var(--f-serif);font-style:italic;font-size:16px;font-weight:400;color:var(--ink-60);}
.lane-count{font-size:13px;color:var(--ink);}

/* ---------- planning ---------- */
.cal-month{font-family:var(--f-serif);font-weight:400;font-size:26px;letter-spacing:0;}
.semaine{border:2px solid var(--ink);border-radius:var(--coin-l);background:var(--surface);overflow:clip;}
.jour-nom{text-transform:capitalize;}
.jour-num{font-family:var(--f-titre);font-weight:400;}
.jour.est-aujourdhui .jour-tete{background:var(--s-textile);}
.jour-carte,.cal-ev{border:1.5px solid var(--ink);border-left:6px solid var(--c,var(--ink));border-radius:9px 9px 3px 9px;background:var(--surface);}
.jour-carte.est-retard{border-color:var(--alert);}
.seg{gap:8px;}
.seg button{
  padding:7px 14px;border:2px solid var(--ink);border-radius:12px 12px 4px 12px;background:var(--surface);
  color:var(--ink);font-size:14.5px;font-weight:600;
}
.seg-sm button{padding:6px 12px;font-size:13.5px;}
.seg button:hover{background:var(--surface-2);border-color:var(--ink);}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--blue);}
/* L'avancement d'un article, lui, se lit d'un bloc : l'état actif prend sa couleur. */
.seg-etat{display:inline-flex;flex-wrap:nowrap;gap:0;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--surface);}
.seg-etat button{padding:3px 10px;border:0;border-radius:0;background:transparent;font-size:12px;color:var(--ink-60);box-shadow:none;}
.seg-etat button + button{border-left:1.5px solid var(--ink-12);}
.seg-etat button[aria-pressed="true"]{box-shadow:none;}

/* ---------- panneau d'un projet ---------- */
.drawer{
  background-color:var(--paper);background-image:radial-gradient(var(--ink-12) 1.1px,transparent 1.5px);background-size:18px 18px;
  border-left:2.5px solid var(--ink);box-shadow:-6px 0 0 var(--blue);
}
.drawer-head,.drawer-foot{background:var(--surface);border-color:var(--ink);}
.lecture-titre{font-family:var(--f-titre);font-weight:400;text-transform:uppercase;font-size:clamp(28px,3.4vw,38px);line-height:.95;letter-spacing:-.005em;text-wrap:balance;}
.lecture-texte{font-family:var(--f-serif);font-size:21px;line-height:1.2;}
.lecture-bloc .label,.field > label,.label,.section-label{font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--ink-60);}
.input,input[type=password].input,select.input,textarea.input{border:2px solid var(--ink-25);border-radius:12px 12px 4px 12px;background:var(--surface);}
.input:focus{border-color:var(--ink);box-shadow:3px 3px 0 var(--blue);}

/* ---------- atelier ---------- */
.fiche{border:2px solid var(--ink);border-radius:var(--coin-l);box-shadow:5px 5px 0 var(--ink);overflow:hidden;background:var(--surface);}
.fiche-head{background:var(--s-textile);border-bottom:2px solid var(--ink);}
.fiche-title{font-family:var(--f-titre);font-weight:400;text-transform:uppercase;font-size:22px;line-height:.95;letter-spacing:-.005em;}
.fiche-meta{font-family:var(--f-serif);font-style:italic;font-size:18px;color:var(--ink);}
.item-line.etat-attente{--e:var(--e-attente);background:var(--e-attente-doux);border-left:6px solid var(--e);}
.item-line.etat-production{--e:var(--e-production);background:var(--e-production-doux);border-left:6px solid var(--e);}
.item-line.etat-pret{--e:var(--e-pret);background:var(--e-pret-doux);border-left:6px solid var(--e);}
.etat-badge-attente{background:var(--e-attente);color:var(--ink);}
.etat-badge-production{background:var(--e-production);color:var(--ink);}
.etat-badge-pret{background:var(--e-pret);color:var(--ink);}
.seg-etat button[aria-pressed="true"],
.item-line.etat-production .seg-etat button[aria-pressed="true"],
.item-line.etat-pret .seg-etat button[aria-pressed="true"]{background:var(--e,var(--ink));border-color:var(--ink-12);color:var(--ink);}
.picto-lg{border:2px solid var(--ink);border-radius:11px 11px 3px 11px;background:var(--surface);}
.size-chip{border:1.5px solid var(--ink);border-radius:7px 7px 2px 7px;background:var(--surface);}
.item-logo{font-family:var(--f-serif);font-style:italic;font-size:16.5px;}
.fiche-origine{background:var(--ink);color:var(--paper);border-radius:6px;}
.heures{padding:22px;border:2px solid var(--ink);border-radius:var(--coin-l);background:var(--surface);box-shadow:5px 5px 0 var(--s-textile);}
.heures-solde-nombre{font-family:var(--f-titre);font-weight:400;font-size:40px;letter-spacing:0;}

/* ---------- récurrent ---------- */
.rec-tableau,.fact-tableau,.serveurs .rec-tableau{border:2px solid var(--ink);border-radius:var(--coin-l);background:var(--surface);overflow:clip;}
/* Dans les tableaux, un montant se lit comme un chiffre : le champ ne se
   montre qu'au survol et à la saisie. */
:is(.rec-tableau,.fact-tableau,.serveurs,.pub-liste,.pub-budget,.afact-liste) :is(.input,input.input){
  border-color:transparent;background:transparent;box-shadow:none;
}
:is(.rec-tableau,.fact-tableau,.serveurs,.pub-liste,.pub-budget,.afact-liste) :is(.input,input.input):hover{border-color:var(--ink-25);border-style:dashed;}
:is(.rec-tableau,.fact-tableau,.serveurs,.pub-liste,.pub-budget,.afact-liste) :is(.input,input.input):focus{
  border-color:var(--ink);border-style:solid;background:var(--surface);box-shadow:3px 3px 0 var(--blue);
}
.fact-case .money input{font-weight:600;}
/* Le bandeau de la facturation : trois chiffres, trois cartes. */
.fact-bandeau{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch;
  margin-bottom:20px;padding:0;border:0;background:none;box-shadow:none;}
.fact-somme,.fact-somme-detail,.fact-annuel{
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;margin:0;
  padding:16px 18px;border:2px solid var(--ink);border-radius:18px 18px 6px 18px;box-shadow:4px 4px 0 var(--ink);
}
.fact-somme{background:var(--s-social);}
.fact-somme-detail{background:var(--surface);font-family:var(--f-serif);font-size:20px;font-weight:400;line-height:1.15;color:var(--ink);}
.fact-annuel{background:var(--s-textile);}
.fact-somme-nombre,.fact-annuel-nombre{font-size:clamp(30px,3vw,42px);line-height:.95;}
.fact-somme-unite,.fact-annuel-unite{font-family:var(--f-serif);font-style:italic;font-size:18px;font-weight:400;color:var(--ink);}
.fact-courbe{padding:14px 18px 8px;}
.fact-courbe svg{max-height:170px;}
@media (max-width:760px){ .fact-bandeau{grid-template-columns:minmax(0,1fr);} }
.rec-entete,.fact-entete{background:var(--surface-2);border-bottom:2px solid var(--ink);}
.rec-tete.est-courante,.rec-cellule.est-courante{background:color-mix(in srgb,var(--s-textile) 35%,var(--surface));}
.rec-tete.est-courante .rec-tete-titre{color:var(--ink);}
.rec-nom{font-weight:600;}
.fact-somme-nombre,.fact-annuel-nombre,.serv-total span:first-child{font-family:var(--f-titre);font-weight:400;letter-spacing:0;}
.fact-courbe,.brouillon{border:2px solid var(--ink);border-radius:var(--coin-l);background:var(--surface);}
.pub-ligne,.seo-ligne{border:2px solid var(--ink);border-radius:var(--coin-m);background:var(--surface);}
.pub-jauge{border:2px solid var(--ink);border-radius:999px;background:var(--surface);}
.pub-jauge i{background:var(--s-social);}
.pub-reste.est-depasse .pub-jauge i{background:var(--alert);}
.serv-ligne.est-imminente{background:var(--alert-soft);}

/* Factures du mois : la liste à cocher, au-dessus de tout le reste. Une
   ligne par facture, dans l'ordre des jours ; le total du mois en haut à
   droite, et le bilan des mois passés en bas. */
.afact{margin-bottom:26px;padding:20px 22px 18px;border:2px solid var(--ink);border-radius:var(--coin-l);
  background:var(--surface);box-shadow:5px 5px 0 var(--s-social);}
.afact-tete{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 28px;margin-bottom:16px;}
.afact-titre{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;}
.afact-h{margin:0;font-family:var(--f-titre);font-weight:400;font-size:clamp(22px,2.4vw,30px);line-height:1;
  text-transform:uppercase;letter-spacing:0;}
.afact-mois{margin:0;}
.afact-mois .icon-btn[disabled]{opacity:.3;cursor:default;}
.afact-resume{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:0 1 380px;min-width:0;}
.afact-somme{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:4px 10px;}
.afact-somme-nombre{font-family:var(--f-titre);font-size:clamp(30px,3.2vw,42px);line-height:.95;font-variant-numeric:tabular-nums;}
.afact-somme-unite{font-family:var(--f-serif);font-style:italic;font-size:18px;line-height:1.1;text-align:right;}
.afact-jauge{display:block;width:100%;height:12px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);overflow:hidden;}
.afact-jauge i{display:block;height:100%;background:var(--s-social);border-right:2px solid var(--ink);transition:width .2s ease;}
.afact-jauge i[style^="width:0"]{border-right:0;}
.afact-compte{font-size:12.5px;font-weight:600;color:var(--ink-60);}
/* Le mois famille par famille : ce qui est facturé, sur ce qui était prévu. */
.afact-familles{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;margin:0 0 18px;}
.afact-famille{
  display:flex;flex-direction:column;gap:3px;min-width:0;padding:11px 14px 12px;
  border:2px solid var(--ink);border-radius:14px 14px 4px 14px;
  background:color-mix(in srgb,var(--c) 22%,var(--surface));
}
.afact-famille-nom{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink-60);}
.afact-famille-fait{font-family:var(--f-titre);font-weight:400;font-size:24px;line-height:1.05;font-variant-numeric:tabular-nums;}
.afact-famille-prevu{font-family:var(--f-serif);font-style:italic;font-size:15px;color:var(--ink-60);}
.afact-famille-jauge{display:block;height:7px;margin-top:5px;border:1.5px solid var(--ink);border-radius:999px;background:var(--surface);overflow:hidden;}
.afact-famille-jauge i{display:block;height:100%;background:var(--c);}
@media (max-width:760px){
  .afact-familles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .afact-famille{padding:9px 11px 10px;}
  .afact-famille-fait{font-size:20px;}
  .afact-famille-prevu{font-size:13.5px;}
}
.afact-filtres-ligne{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:12px;}
/* Le filtre par personne, le même sur chaque onglet du récurrent. */
.filtre-qui button{display:inline-flex;align-items:center;gap:6px;}
.filtre-qui .who-dot{width:18px;height:18px;margin-left:-6px;}
.rec-barre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px;}
.rec-barre > .pub-mois,.rec-barre > .cal-head{margin-bottom:0;}
/* La date et la personne qui facture, côte à côte. */
.afact-quand{display:flex;align-items:center;gap:6px;min-width:0;}
.afact-qui-btn{
  display:inline-flex;align-items:center;gap:6px;min-width:0;padding:2px 10px 2px 2px;cursor:pointer;
  border:1.5px solid var(--ink-25);border-radius:999px;background:var(--surface);
  font:inherit;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;
}
.afact-qui-btn:hover{border-color:var(--ink);}
.afact-qui-btn .who-dot{width:24px;height:24px;}
.afact-qui-nom{overflow:hidden;text-overflow:ellipsis;}
.afact-qui-btn.est-vide{border-style:dashed;color:var(--ink-45);font-weight:500;}
.afact-qui-btn.est-vide .who-dot{border-style:dashed;border-color:var(--ink-25);background:transparent;}
.menu .afact-rythme .who-dot{width:20px;height:20px;}
.afact-nb{margin-left:2px;font-variant-numeric:tabular-nums;opacity:.65;}
.afact-liste{border:2px solid var(--ink);border-radius:var(--coin-m);background:var(--surface);overflow:clip;}
.afact-ligne{
  display:grid;grid-template-columns:30px 206px minmax(0,1fr) 130px 160px 30px;align-items:center;gap:14px;
  padding:9px 14px;border-top:1.5px solid var(--ink-12);
}
.afact-ligne:first-child{border-top:0;}
.afact-coche{
  display:grid;place-items:center;width:30px;height:30px;padding:0;cursor:pointer;
  border:2px solid var(--ink);border-radius:9px 9px 3px 9px;background:var(--surface);color:transparent;
}
.afact-coche svg{width:18px;height:18px;stroke-width:2.6;}
.afact-coche:hover{background:var(--surface-2);color:var(--ink-25);}
.afact-coche[aria-checked="true"]{background:var(--s-social);color:var(--ink);box-shadow:2px 2px 0 var(--ink);}
.afact-jour{
  justify-self:start;width:max-content;max-width:100%;padding:4px 11px;cursor:pointer;
  border:1.5px solid var(--ink-25);border-radius:999px;background:var(--surface);
  font:inherit;font-size:13px;font-weight:600;color:var(--ink);-webkit-appearance:none;appearance:none;
}
.afact-jour:hover{border-color:var(--ink);}
.afact-jour:focus-visible{outline:none;border-color:var(--ink);box-shadow:2px 2px 0 var(--blue);}
.afact-jour.est-fixe{cursor:default;border-style:dashed;}
.afact-jour.est-fixe:hover{border-color:var(--ink-25);}
.sans-date .afact-jour{border-style:dashed;color:var(--ink-45);}
.afact-client{display:flex;align-items:center;gap:10px;min-width:0;}
.afact-qui{display:flex;flex-direction:column;gap:1px;min-width:0;}
.afact-qui .rec-nom,.afact-quoi{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.afact-quoi{font-size:12px;color:var(--ink-45);}
.afact-montant input{width:100%;font-size:14px;font-weight:600;padding:6px 28px 6px 9px;}
.afact-montant input::placeholder{color:var(--ink-25);font-weight:600;}
.afact-etat{font-size:12.5px;font-weight:600;color:var(--ink-45);text-align:right;}
.afact-ligne.est-faite .afact-etat{color:#1F7A4C;}
.afact-ligne.est-faite .afact-quoi{opacity:.75;}
/* La première facture envoyée ouvre la partie « faites » : un trait plus
   marqué la sépare de ce qui reste à envoyer. */
.afact-ligne:not(.est-faite) + .afact-ligne.est-faite{border-top:2px solid var(--ink);}
/* « Pas de facture ce mois-ci » : la ligne reste en bas, éteinte et hachurée. */
.afact-exclure{
  display:grid;place-items:center;width:30px;height:30px;padding:0;cursor:pointer;
  border:1.5px dashed var(--ink-25);border-radius:9px 9px 3px 9px;background:transparent;color:var(--ink-25);
}
.afact-exclure svg{width:17px;height:17px;}
.afact-exclure:hover{border-color:var(--ink);color:var(--ink-60);}
.afact-exclure[aria-checked="true"]{border-style:solid;border-color:var(--ink);background:var(--surface-2);color:var(--ink);}
.afact-ligne.est-exclue{
  background:repeating-linear-gradient(-45deg,transparent 0 9px,color-mix(in srgb,var(--ink) 4%,transparent) 9px 14px);
}
.afact-ligne.est-exclue :is(.afact-client,.afact-montant,.afact-quand){opacity:.5;}
.afact-ligne.est-exclue .afact-etat{font-family:var(--f-serif);font-size:15px;font-weight:400;color:var(--ink-60);}
.afact-ligne:not(.est-exclue) + .afact-ligne.est-exclue{border-top:2px dashed var(--ink-25);}
.afact-ligne.est-retard{background:var(--alert-soft);}
.afact-ligne.est-retard .afact-etat{color:var(--alert);font-weight:700;}
.afact-ligne.est-jour{background:color-mix(in srgb,var(--s-textile) 32%,var(--surface));}
.afact-ligne.est-jour .afact-etat{color:var(--ink);font-weight:700;}
.afact-vide{margin:0;padding:18px;font-family:var(--f-serif);font-size:18px;color:var(--ink-60);}
/* Sous la liste : l'ajout d'une facture hors tableau, puis l'histogramme de
   ce qui a été coché mois après mois. */
.afact-pied{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:12px;}
.afact-pied-aide{font-size:12.5px;color:var(--ink-45);font-weight:500;}
.afact-histo{margin-top:20px;padding-top:16px;border-top:1.5px dashed var(--ink-25);}
.afact-histo-tete{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-bottom:10px;}
.afact-histo-aide{font-family:var(--f-serif);font-size:17px;line-height:1.2;color:var(--ink-60);}
.afact-barres{display:flex;align-items:flex-end;gap:12px;min-height:178px;overflow-x:auto;padding-bottom:4px;}
.afact-barre{
  display:flex;flex-direction:column;align-items:center;gap:6px;flex:0 0 auto;width:86px;padding:0;
  border:0;background:none;color:var(--ink);cursor:pointer;font:inherit;
}
.afact-barre-montant{font-family:var(--f-titre);font-size:15px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;}
.afact-barre-col{
  display:flex;align-items:flex-end;width:58px;height:120px;
  border-bottom:2px solid var(--ink);
}
.afact-barre-col i{
  display:block;width:100%;background:var(--s-social);border:2px solid var(--ink);border-bottom:0;
  border-radius:10px 10px 0 0;transition:height .2s ease;
}
.afact-barre-col i[style^="height:0"]{border:0;}
.afact-barre.est-en-cours .afact-barre-col i{
  background:repeating-linear-gradient(-45deg,var(--s-social) 0 7px,color-mix(in srgb,var(--s-social) 45%,var(--surface)) 7px 12px);
}
.afact-barre-mois{display:flex;flex-direction:column;align-items:center;font-size:12.5px;font-weight:600;color:var(--ink-60);line-height:1.15;}
.afact-barre-mois em{font-family:var(--f-serif);font-size:14px;font-weight:400;color:var(--ink);}
.afact-barre:hover .afact-barre-col i{box-shadow:3px 0 0 var(--ink);}
.afact-barre.est-affiche .afact-barre-mois{color:var(--ink);font-weight:700;}
.afact-barre.est-affiche .afact-barre-col{border-bottom-width:4px;}
/* Le calendrier d'une ligne : les jours du mois en grille, puis le rythme. */
.menu .afact-cal{display:grid;grid-template-columns:repeat(7,32px);gap:3px;padding:4px 6px 6px;}
.menu .afact-cal button{
  justify-content:center;width:32px;height:30px;padding:0;border-radius:8px 8px 3px 8px;
  font-size:13px;font-variant-numeric:tabular-nums;
}
.menu .afact-cal button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}
.menu .afact-rythme svg{opacity:0;}
.menu .afact-rythme[aria-pressed="true"] svg{opacity:1;}
/* Les mois d'un trimestre ou d'un semestre : un clic sur l'un fixe le cycle. */
.menu .afact-cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:2px 6px 6px;}
.menu .afact-cycle button{justify-content:center;padding:6px 0;border-radius:8px 8px 3px 8px;font-size:12.5px;}
.menu .afact-cycle button[aria-pressed="true"]{background:var(--ink);color:var(--paper);}
.menu button[disabled]{cursor:default;opacity:.55;}
.menu button[disabled]:hover{background:none;}
@media (max-width:760px){
  .afact{padding:16px 14px;box-shadow:4px 4px 0 var(--s-social);}
  .afact-resume{align-items:flex-start;flex-basis:100%;}
  .afact-somme{justify-content:flex-start;}
  .afact-somme-unite{text-align:left;}
  /* Deux lignes : la coche, le client et le montant, puis le jour et l'état
     qui se partagent la largeur sous le nom. */
  .afact-ligne{
    grid-template-columns:30px minmax(0,1fr) 92px 30px;
    grid-template-areas:"coche client montant exclure" "coche bas bas bas";gap:8px 10px;padding:10px 12px;
  }
  .afact-coche{grid-area:coche;align-self:start;}
  .afact-client{grid-area:client;align-items:flex-start;}
  .afact-client .cmark{display:none;}
  .afact-qui .rec-nom{white-space:normal;overflow-wrap:anywhere;line-height:1.2;}
  .afact-montant{grid-area:montant;align-self:start;}
  .afact-montant input{padding-left:4px;}
  .afact-quand{grid-area:bas;justify-self:start;}
  .afact-qui-btn{padding:2px;}
  .afact-qui-nom{display:none;}
  .afact-etat{grid-area:bas;justify-self:end;white-space:nowrap;}
  .afact-exclure,.afact-exclure-vide{grid-area:exclure;align-self:start;}
}

/* ---------- mon espace ---------- */
.notes-rapides{border:2px dashed var(--ink-25);border-radius:var(--coin-l);background:rgba(255,253,248,.6);}
.pense{background:var(--s-textile);border:2px solid var(--ink);border-radius:4px 4px 16px 4px;box-shadow:3px 3px 0 var(--ink);}
.pense.est-faite{background:var(--surface);border-style:dashed;box-shadow:none;}
.pense-texte{font-weight:600;}
.agenda{border:2px solid var(--ink);border-radius:var(--coin-l);background:var(--surface);box-shadow:5px 5px 0 var(--ink);}
.tache-posee{border:2px solid var(--ink);border-radius:10px 10px 3px 10px;}

/* ---------- fenêtres, menus, messages ---------- */
.modal{border:2.5px solid var(--ink);border-radius:var(--coin-l);box-shadow:7px 7px 0 var(--ink);background:var(--surface);}
.modal h2{font-family:var(--f-titre);font-weight:400;text-transform:uppercase;font-size:28px;line-height:.95;letter-spacing:-.005em;}
.modal .modal-sub{font-family:var(--f-serif);font-size:19px;}
.menu{border:2px solid var(--ink);border-radius:14px 14px 4px 14px;box-shadow:4px 4px 0 var(--ink);background:var(--surface);}
.toast{border:2px solid var(--ink);border-radius:12px 12px 4px 12px;box-shadow:3px 3px 0 var(--blue);}

/* ---------- connexion ---------- */
.login-card{border:2.5px solid var(--ink);border-radius:26px 26px 8px 26px;box-shadow:7px 7px 0 var(--blue);background:var(--surface);}
.login-card h1{font-family:var(--f-serif);font-weight:400;font-size:30px;letter-spacing:0;line-height:1.05;}
.login-card .sub{font-family:var(--f-serif);font-size:18px;}

/* ---------- pied de page ---------- */
.pied{border-top:2px dashed var(--ink-12);}
.pied-lien{font-size:14px;font-weight:600;color:var(--ink);text-decoration-thickness:2px;}

@media (prefers-reduced-motion:reduce){
  .card,.btn,.nav button{transition:none;}
}