/**
 * Onglet « À faire » (tâches). Rendu dans la coque de l'espace pro (tokens --sp-*/--as-*).
 */

.af-page{ max-width:1100px; }
.af-cta{ display:flex; gap:8px; flex-wrap:wrap; }
.af-empty{ text-align:center; padding:54px 24px; color:var(--sp-gray5); }
.af-empty svg{ width:40px; height:40px; color:var(--sp-gray4); margin-bottom:10px; }
.af-empty p{ font-weight:600; color:var(--sp-gray7); margin:0 0 4px; }
.af-empty__hint{ font-size:.85rem; color:var(--sp-gray5); }

/* Formulaire nouvelle tâche. */
.af-newform{ background:var(--as-surface); border:1px solid var(--as-line-2); border-radius:12px; padding:16px; margin-bottom:16px; box-shadow:0 1px 2px rgba(16,24,40,.04); }
.af-newform[hidden]{ display:none; }
.af-newform__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }

/* Sous-onglets du hub. */
.af-seg{ display:inline-flex; flex-wrap:wrap; background:var(--sp-gray1); border-radius:10px; padding:3px; gap:2px; margin-bottom:16px; }
.af-seg a{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:.83rem; font-weight:600; color:var(--sp-gray5); padding:7px 14px; border-radius:8px; text-decoration:none; }
.af-seg a.is-active{ background:var(--sp-white); color:var(--sp-dark); box-shadow:0 1px 2px rgba(16,24,40,.08); }
.af-seg__count{ font-size:.72rem; font-weight:800; background:var(--sp-gray3); color:var(--sp-gray7); border-radius:9px; padding:0 6px; line-height:16px; }
.af-seg a.is-active .af-seg__count{ background:var(--sp-amber); color:#fff; }

/* Sous-onglet Pièces à commander. */
.af-plist{ display:flex; flex-direction:column; gap:8px; }
.af-prow{ display:flex; align-items:center; gap:12px; background:var(--as-surface); border:1px solid var(--as-line-2); border-left:4px solid var(--sp-gray4); border-radius:12px; padding:12px 15px; box-shadow:0 1px 2px rgba(16,24,40,.04); flex-wrap:wrap; }
.af-prow--a_commander{ border-left-color:#dc2626; }
.af-prow--commandee{ border-left-color:var(--sp-amber); }
.af-prow--recue{ border-left-color:#2563eb; }
.af-prow__lbl{ flex:1; min-width:160px; font-size:.92rem; font-weight:600; color:var(--sp-dark); }
.af-prow__qty{ color:var(--sp-gray5); font-weight:400; }
.af-prow__who{ font-size:.84rem; color:var(--sp-gray6); text-decoration:none; }
a.af-prow__who:hover{ color:var(--sp-amber-deep,#b45309); text-decoration:underline; }
.af-prow__st{ font:inherit; font-size:.82rem; font-weight:600; padding:6px 10px; border:1px solid var(--as-line-2); border-radius:8px; background:var(--sp-white); cursor:pointer; }
.af-prow__st:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }
.af-pst--cmd{ color:#b91c1c; }
.af-pst--wait{ color:var(--sp-amber-deep,#b45309); }
.af-pst--recue{ color:#1d4ed8; }
.af-pst--done{ color:#067a52; }

.af-field{ display:block; margin-bottom:12px; }
.af-field span{ display:block; font-size:.8rem; font-weight:600; color:var(--sp-gray5); margin-bottom:5px; }
.af-field input, .af-field select, .af-field textarea{ width:100%; font:inherit; font-size:.9rem; padding:9px 11px; border:1px solid var(--as-line-2); border-radius:9px; background:var(--sp-white); color:var(--sp-dark); }
.af-field textarea{ resize:vertical; }
.af-field input:focus, .af-field select:focus, .af-field textarea:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }
.af-newform__act{ display:flex; justify-content:flex-end; gap:10px; }
.af-err{ color:#dc2626; font-size:.83rem; margin:0 0 8px; }

/* Liste. */
.af-list{ display:flex; flex-direction:column; gap:10px; }
.af-row{
	display:flex; gap:18px; align-items:stretch; flex-wrap:wrap;
	background:var(--as-surface); border:1px solid var(--as-line-2);
	border-left:4px solid var(--sp-gray4); border-radius:12px; padding:14px 16px;
	box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 18px -12px rgba(16,24,40,.16);
}
.af-row--retard{ border-left-color:#dc2626; }
.af-row--bientot{ border-left-color:var(--sp-amber); }
.af-row--avenir{ border-left-color:#2563eb; }
.af-row--sansdate{ border-left-color:var(--sp-gray4); }
.af-row--done{ border-left-color:#10b981; opacity:.62; }

.af-row__main{ flex:1; min-width:280px; }
.af-row__top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:3px; }
.af-row__client{ font-size:.98rem; font-weight:700; color:var(--sp-dark); }
.af-row__meta{ font-size:.79rem; color:var(--sp-gray5); margin-bottom:7px; }
.af-row__text{ font-size:.92rem; color:var(--sp-gray8,#1f2937); line-height:1.45; margin:0; white-space:pre-wrap; }
.af-row__text[hidden]{ display:none; }

.af-edit{ margin-top:4px; }
.af-edit[hidden]{ display:none; }
.af-edit textarea{ width:100%; font:inherit; font-size:.9rem; padding:8px 10px; border:1px solid var(--as-line-2); border-radius:9px; background:var(--sp-white); color:var(--sp-dark); resize:vertical; }
.af-edit textarea:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }
.af-edit__act{ display:flex; justify-content:flex-end; gap:8px; margin-top:7px; }

.af-pill{ font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 9px; border-radius:999px; }
.af-pill--retard{ color:#b91c1c; background:#fde8e8; }
.af-pill--bientot{ color:var(--sp-amber-deep,#b45309); background:color-mix(in srgb,var(--sp-amber) 16%,#fff); }
.af-pill--avenir{ color:#1d4ed8; background:#e7eefe; }
.af-pill--sansdate{ color:var(--sp-gray6); background:var(--sp-gray1,#f1f5f9); }
.af-pill--done{ color:#067a52; background:#e3f6ee; }

.af-row__side{ display:flex; flex-direction:column; gap:10px; align-items:flex-end; justify-content:space-between; min-width:230px; }
.af-due{ display:flex; flex-direction:column; gap:3px; align-items:flex-end; }
.af-due span{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--sp-gray5); }
.af-due__input{ font:inherit; font-size:.86rem; padding:7px 10px; border:1px solid var(--as-line-2); border-radius:9px; background:var(--sp-white); color:var(--sp-dark); }
.af-due__input:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }

.af-row__act{ display:flex; gap:7px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
.af-icon{ width:30px; height:30px; border:1px solid var(--as-line-2); background:var(--sp-white); border-radius:8px; color:var(--sp-gray5); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.af-icon:hover{ border-color:var(--sp-gray3); color:var(--sp-dark); }
.af-icon svg{ width:15px; height:15px; }
.af-icon--del:hover{ background:#fde8e8; border-color:#f5c2c2; color:#dc2626; }

@media(max-width:640px){
	.af-newform__grid{ grid-template-columns:1fr; }
	.af-row__side{ align-items:stretch; min-width:0; width:100%; }
	.af-due{ align-items:stretch; }
	.af-row__act{ justify-content:flex-start; }
}

/* ============================================================
   Suivi (rework carnet) : hub violet-actif + cartes carnet (tokens --sp-*).
   ============================================================ */
.af-seg{ background:var(--sp-page-creuse); border:1px solid var(--sp-gray2); border-radius:var(--sp-radius); padding:4px; gap:4px; width:max-content; max-width:100%; }
.af-seg a{ border-radius:var(--sp-radius); font-family:'Archivo',sans-serif; color:var(--sp-gray6); }
.af-seg a.is-active{ background:var(--sp-amber); color:var(--sp-on-accent); box-shadow:none; }
.af-seg__count{ background:rgba(20,30,29,.1); color:var(--sp-gray7); }
.af-seg a.is-active .af-seg__count{ background:rgba(255,255,255,.25); color:#fff; }
.af-row, .af-prow{ border-radius:var(--sp-radius); box-shadow:var(--as-shadow); border-color:var(--sp-gray2); background:var(--sp-white); border-left-width:3px; }
.af-row__client, .af-prow__lbl{ font-family:'Archivo',sans-serif; color:var(--sp-gray7); }
.af-row__meta{ font-family:'Courier Prime',monospace; }
.af-newform{ border-radius:var(--sp-radius); background:var(--sp-white); border-color:var(--sp-gray2); }

/* ============================================================
   SUIVI — quatre piles face à face (refonte validée).
   Chaque nature a sa pile et son action : on ne visite plus les onglets un par
   un, tout ce qui attend est visible d'un coup.
   ============================================================ */
/* Les quatre encarts font la même hauteur : `1fr` sur les rangées et des piles
   étirées. Sans ça, chaque pile prend la hauteur de son contenu et la grille
   part en escalier (Pièces courte, SAV longue). */
/* Reglage du nombre de lignes par cadre : discret, aligne a droite, au-dessus
   du tableau. C'est un reglage d'affichage, pas une action : il ne prend pas la
   place d'un bouton. */
.af-reglage{
	display:flex;align-items:center;justify-content:flex-end;gap:.5rem;
	margin:0 0 8px;
}
.af-reglage__l{
	font-family:'Courier Prime',monospace;font-size:.66rem;letter-spacing:.07em;
	text-transform:uppercase;color:var(--sp-gray5);
}
.af-reglage__s{
	font:inherit;font-size:.82rem;padding:.28rem 1.6rem .28rem .55rem;
	color:var(--sp-gray7);background:var(--sp-white);
	border:1px solid var(--sp-gray3);border-radius:var(--sp-radius);
	appearance:none;-webkit-appearance:none;cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357655F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right .4rem center;background-size:12px;
}
.af-reglage__s:hover{border-color:var(--sp-amber)}
.af-reglage__s:focus-visible{outline:2px solid var(--sp-amber);outline-offset:2px}

.af-piles{
	display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;
	gap:18px;align-items:stretch;margin-top:4px;
}
@media (max-width:900px){ .af-piles{grid-template-columns:1fr} }

.af-pile{
	display:flex;flex-direction:column;
	background:var(--sp-white);
	border:1px solid var(--sp-gray3);
	border-radius:var(--sp-radius);
	box-shadow:var(--as-shadow);
	/* Surtout PAS overflow:hidden : le menu « ⋯ » d'une ligne est en position
	   absolue et se ferait rogner par le cadre de la pile. Les lignes n'ont plus
	   de coins arrondis à masquer, le débordement n'a donc rien à cacher. */
	overflow:visible;
}
/* La première et la dernière ligne épousent les coins du cadre. */
.af-pile > .af-row:last-of-type,
.af-pile > .af-prow:last-of-type{border-radius:0 0 var(--sp-radius) var(--sp-radius)}
.af-pile__hd{
	display:flex;align-items:center;justify-content:space-between;gap:.6rem;
	padding:.7rem 1rem;border-bottom:2px solid var(--sp-dark);
}
.af-pile__hd h2{
	font-family:'Archivo',sans-serif;font-size:1rem;font-weight:800;letter-spacing:-.01em;
	display:flex;align-items:center;gap:.5rem;margin:0;
}
.af-pile__n{
	font-family:'Courier Prime',monospace;font-size:.62rem;font-weight:700;
	border:1px solid color-mix(in srgb, var(--sp-dark) 24%, transparent);
	border-radius:2px;padding:.06em .36em;line-height:1.5;color:var(--sp-gray5);
}
.af-pile__add{
	font-family:'Archivo',sans-serif;font-weight:600;font-size:.76rem;
	background:none;border:1.5px solid color-mix(in srgb, var(--sp-dark) 20%, transparent);
	border-radius:2px;padding:.28rem .5rem;cursor:pointer;color:var(--sp-gray6);text-decoration:none;
}
.af-pile__add:hover{border-color:var(--sp-amber);color:var(--sp-amber)}
.af-pile__vide{
	padding:1.1rem 1rem;text-align:center;margin:0;
	font-family:'Courier Prime',monospace;font-size:.66rem;letter-spacing:.05em;
	text-transform:uppercase;color:var(--sp-gray5);
}

/* ── Une ligne ─────────────────────────────────────────────── */
.af-piles .af-row{
	display:grid;
	grid-template-columns:28px minmax(0,1fr) auto 28px;
	grid-template-areas:"t c a m";
	gap:6px 10px;align-items:start;
	padding:.7rem .85rem;
	border-bottom:1px solid var(--sp-gray2);
	border-left:3px solid transparent;
	background:none;box-shadow:none;border-radius:0;border-top:0;border-right:0;
}
.af-piles .af-row:last-child{border-bottom:0}
/* INDISPENSABLE : `display:grid` ci-dessus l'emporte sur le `display:none` que le
   navigateur applique à [hidden]. Sans ça, la pagination pose bien l'attribut mais
   les lignes restent visibles. (Même piège que le bandeau de création côté Suite.) */
.af-piles .af-row[hidden],
.af-piles .af-prow[hidden]{display:none !important}
.af-piles .af-row:hover{background:color-mix(in srgb, var(--sp-amber) 4%, transparent)}
.af-piles .af-row--retard{border-left-color:#B4302B}
.af-piles .af-row--bientot{border-left-color:var(--sp-g-jaune)}
.af-piles .af-row--done{opacity:.5}
.af-piles .af-row--done .af-row__client,
.af-piles .af-row--done .af-row__text{text-decoration:line-through;text-decoration-thickness:1.5px}
[data-pile="relance"] .af-row{border-left-color:var(--sp-amber)}

.af-tick{
	grid-area:t;width:22px;height:22px;margin-top:1px;border-radius:2px;
	border:1.5px solid color-mix(in srgb, var(--sp-dark) 30%, transparent);
	background:var(--sp-off);cursor:pointer;display:grid;place-items:center;padding:0;
	transition:border-color .14s, background .14s;
}
.af-tick svg{width:13px;height:13px;stroke:var(--sp-on-accent);stroke-width:3;fill:none;opacity:0}
.af-tick:hover{border-color:var(--sp-g-verte)}
.af-row--done .af-tick{background:var(--sp-g-verte);border-color:var(--sp-g-verte)}
.af-row--done .af-tick svg{opacity:1}
/* Le SAV ne se coche pas depuis ici : la vignette n'est qu'un repère. */
.af-tick--muet{cursor:default;border-style:dashed;background:none}
.af-tick--muet svg{opacity:.5;stroke:var(--sp-gray5);stroke-width:2}

.af-row__corps{grid-area:c;min-width:0}
.af-row__top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.af-row__client{font-family:'Archivo',sans-serif;font-weight:700;font-size:.93rem;color:var(--sp-gray7)}
.af-piles .af-row__text{margin:.2rem 0 0;font-size:.88rem;line-height:1.45;color:var(--sp-gray7)}
.af-piles .af-row__meta{
	margin-top:.22rem;font-family:'Courier Prime',monospace;font-size:.62rem;
	letter-spacing:.03em;color:var(--sp-gray5);
}
.af-piles .af-row__meta a{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px}
.af-piles .af-row__meta a:hover{color:var(--sp-amber)}

/* Action principale de la pile. */
.af-act{
	grid-area:a;
	font-family:'Archivo',sans-serif;font-weight:600;font-size:.76rem;white-space:nowrap;
	background:var(--sp-off);border:1.5px solid color-mix(in srgb, var(--sp-dark) 20%, transparent);
	border-radius:2px;padding:.3rem .55rem;cursor:pointer;color:var(--sp-gray7);text-decoration:none;
	display:inline-flex;align-items:center;gap:.3rem;
}
.af-act:hover{border-color:var(--sp-amber);color:var(--sp-amber);background:var(--sp-white)}
.af-act svg{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;flex:none}
.af-act--fort{background:var(--sp-amber);border-color:var(--sp-amber);color:var(--sp-on-accent)}
.af-act--fort:hover{background:var(--sp-amber2);border-color:var(--sp-amber2);color:var(--sp-on-accent)}

/* Échéance : sur la MÊME ligne que le contexte, alignée à droite. Sur sa propre
   rangée elle flottait au milieu de la ligne, sans point d'accroche. */
.af-row__bas{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;margin-top:.22rem}
.af-row__bas .af-row__meta{margin-top:0;min-width:0}
.af-piles .af-due{display:inline-flex;align-items:center;margin:0;flex:none}
.af-piles .af-due__input{
	font-family:'Courier Prime',monospace;font-size:.68rem;
	background:none;border:1px solid transparent;border-radius:2px;
	padding:.1rem .2rem;color:var(--sp-gray5);
}
.af-piles .af-due__input:hover,.af-piles .af-due__input:focus{
	border-color:var(--sp-gray3);background:var(--sp-white);color:var(--sp-gray7);
}
.af-row--retard .af-due__input{color:#B4302B;font-weight:700}

/* Menu des actions secondaires. */
.af-more{grid-area:m;position:relative}
.af-more__btn{
	width:26px;height:26px;border-radius:2px;border:1px solid transparent;background:none;
	color:var(--sp-gray5);cursor:pointer;display:grid;place-items:center;font-size:1rem;line-height:1;opacity:.6;
}
.af-row:hover .af-more__btn,.af-more__btn[aria-expanded="true"]{
	opacity:1;border-color:color-mix(in srgb, var(--sp-dark) 18%, transparent);background:var(--sp-white);
}
@media (pointer:coarse){ .af-more__btn{opacity:1} }
.af-menu{
	position:absolute;top:calc(100% + 4px);right:0;z-index:30;width:200px;
	background:var(--sp-white);border:1px solid var(--sp-gray3);border-radius:var(--sp-radius);
	box-shadow:var(--as-shadow);padding:.3rem;
}
.af-menu[hidden]{display:none}
.af-menu a,.af-menu button{
	display:block;width:100%;text-align:left;background:none;border:0;border-radius:2px;
	padding:.45rem .5rem;cursor:pointer;text-decoration:none;
	font-family:'Archivo',sans-serif;font-weight:600;font-size:.83rem;color:var(--sp-gray7);
}
.af-menu a:hover,.af-menu button:hover{background:var(--sp-off)}
.af-menu hr{border:0;border-top:1px solid var(--sp-gray2);margin:.25rem 0}
.af-menu__del{color:#B4302B !important}

/* Pièces : même allure que les autres lignes — vignette à gauche, corps au
   centre, état à droite. Le sélecteur reste (une pièce a quatre états) mais il
   est ramené à la taille d'une étiquette : il ne doit pas peser plus que le nom
   de la pièce. */
.af-piles .af-prow{
	display:grid;grid-template-columns:24px minmax(0,1fr) auto;
	align-items:center;gap:.7rem;
	padding:.7rem .85rem;border-bottom:1px solid var(--sp-gray2);
	border-left:3px solid transparent;background:none;border-radius:0;
	box-shadow:none;border-top:0;border-right:0;
}
.af-piles .af-prow:last-child{border-bottom:0}
.af-piles .af-prow:hover{background:color-mix(in srgb, var(--sp-amber) 4%, transparent)}
/* Le filet de gauche dit l'état, comme l'urgence sur les tâches. */
.af-piles .af-prow--a_commander{border-left-color:#B4302B}
.af-piles .af-prow--commandee{border-left-color:var(--sp-g-jaune)}
.af-piles .af-prow--recue{border-left-color:var(--sp-amber)}
.af-piles .af-prow--posee{border-left-color:var(--sp-g-verte)}
.af-prow__ico{display:grid;place-items:center;color:var(--sp-gray5)}
.af-prow__ico svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none}
.af-prow__corps{min-width:0}
.af-piles .af-prow__lbl{display:block;font-family:'Archivo',sans-serif;font-weight:700;font-size:.9rem;color:var(--sp-gray7)}
.af-piles .af-prow__who{font-family:'Courier Prime',monospace;font-size:.62rem;color:var(--sp-gray5);text-decoration:none}
.af-piles .af-prow__who:hover{color:var(--sp-amber);text-decoration:underline}
.af-piles .af-prow__st{
	font-family:'Courier Prime',monospace;font-weight:700;font-size:.62rem;
	letter-spacing:.04em;text-transform:uppercase;
	border:1px solid var(--sp-gray3);border-radius:2px;
	background:var(--sp-off);color:var(--sp-gray6);
	flex:none;cursor:pointer;
	appearance:none;-webkit-appearance:none;
	/* Chevron à GAUCHE du libellé : les autres piles ont leurs boutons en
	   [icône][texte] (« Appeler », « Relancer », « Ouvrir »), ce sélecteur était
	   le seul en [texte][chevron]. */
	padding:.2rem .45rem .2rem 1.15rem;
	background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
	background-position:8px 52%,12px 52%;
	background-size:4px 4px,4px 4px;background-repeat:no-repeat;
}
.af-piles .af-prow__st:hover{border-color:var(--sp-amber);color:var(--sp-amber)}
/* La couleur du texte reprend l'état, comme les étiquettes ailleurs. */
.af-piles .af-prow--a_commander .af-prow__st{color:#B4302B;border-color:color-mix(in srgb,#B4302B 32%,transparent)}
.af-piles .af-prow--posee .af-prow__st{color:#0d6b4a;border-color:color-mix(in srgb,var(--sp-g-verte) 38%,transparent)}
/* Mention de tête : combien restent réellement à commander. */
.af-pile__note{
	font-family:'Courier Prime',monospace;font-size:.62rem;letter-spacing:.04em;
	text-transform:uppercase;color:#B4302B;
}

/* Le formulaire d'ajout se pose sous les piles. */
.af-newform{margin-top:18px}

/* ── Pagination des piles : trois lignes visibles, le reste par pages ──────────
   Une pile qui défile sur vingt lignes fait perdre le bénéfice du face-à-face :
   les quatre piles doivent rester lisibles ensemble, à hauteur comparable. */
.af-pager{
	display:flex;align-items:center;justify-content:center;gap:.6rem;
	padding:.5rem 1rem;border-top:1px solid var(--sp-gray2);
}
.af-pager[hidden]{display:none}
.af-pager__btn{
	width:26px;height:26px;line-height:1;font-size:.95rem;
	display:inline-flex;align-items:center;justify-content:center;
	background:var(--sp-white);color:var(--sp-gray7);
	border:1px solid var(--sp-gray3);border-radius:2px;cursor:pointer;
}
.af-pager__btn:hover:not(:disabled){border-color:var(--sp-amber);color:var(--sp-amber)}
.af-pager__btn:disabled{opacity:.35;cursor:default}
.af-pager__lbl{
	font-family:'Courier Prime',monospace;font-size:.66rem;
	letter-spacing:.04em;color:var(--sp-gray5);white-space:nowrap;
}

/* Échéance : une date lisible, ou un « + échéance » discret quand il n'y en a
   pas. Le champ date natif affichait « jj/mm/aaaa » en permanence et coupait la
   phrase de contexte en deux pour ne rien dire. */
.af-due__ouvrir{
	font-family:'Courier Prime',monospace;font-size:.66rem;letter-spacing:.03em;
	background:none;border:1px solid transparent;border-radius:2px;
	padding:.1rem .3rem;cursor:pointer;color:var(--sp-gray6);white-space:nowrap;
}
.af-due__ouvrir:hover{border-color:var(--sp-gray3);background:var(--sp-white);color:var(--sp-gray7)}
.af-due--vide .af-due__ouvrir{opacity:0;transition:opacity .14s}
.af-row:hover .af-due--vide .af-due__ouvrir,
.af-due--vide .af-due__ouvrir:focus{opacity:1}
@media (pointer:coarse){ .af-due--vide .af-due__ouvrir{opacity:.6} }
.af-row--retard .af-due__ouvrir{color:#B4302B;font-weight:700}
.af-piles .af-due__input[hidden]{display:none}

/* Colonne étroite : le contexte se replie sur plusieurs lignes et l'échéance,
   alignée à droite, semble s'intercaler dans la phrase. On les empile. */
@media (max-width:900px){
	.af-row__bas{flex-direction:column;align-items:flex-start;gap:.1rem}
	.af-piles .af-due{margin-left:-.3rem}
}

/* ── Compacité des lignes ─────────────────────────────────────────────────────
   Chaque ligne portait 22px de padding vertical, un `margin-bottom:7px` hérité
   sur la ligne de contexte et des interlignes larges : cumulés, ils faisaient
   déborder les piles. On resserre sans rogner la lisibilité. */
.af-piles .af-row,
.af-piles .af-prow{padding-top:.5rem;padding-bottom:.5rem}
.af-piles .af-row__meta{margin-bottom:0}
.af-piles .af-row__text{margin-top:.12rem;line-height:1.38}
.af-row__bas{margin-top:.12rem}
.af-piles .af-row__top{gap:.4rem}
.af-piles .af-row{gap:4px 10px}
/* La vignette et l'action n'ont pas besoin d'être aussi hautes que la ligne. */
.af-act{padding:.24rem .5rem}
.af-tick{width:20px;height:20px}
.af-piles .af-prow__lbl{line-height:1.3}

/* ── Gain de hauteur : faire tenir les quatre piles sans défilement ───────────
   Leviers non destructifs, du moins coûteux au plus visible. Aucun ne retire
   d'information : on rogne des blancs, pas du contenu. */
/* 1. En-tête de page : le sous-titre passe en une ligne serrée. */
.af-page > .as-space-header{margin-bottom:8px}
.af-page > .as-space-header .as-space-subtitle{margin-top:2px;line-height:1.3}
/* 2. En-tête de pile : 49px → 40px. */
.af-pile__hd{padding:.45rem .85rem}
.af-pile__hd h2{font-size:.95rem}
/* 3. Barre de pages : 43px → 30px. */
.af-pager{padding:.3rem 1rem}
.af-pager__btn{width:22px;height:22px;font-size:.85rem}
/* 4. Espace entre les piles. */
.af-piles{gap:12px}
/* 5. Garde-fou : une tâche bavarde ne fait pas exploser sa pile. Deux lignes
   au plus, le texte entier reste lisible en infobulle et à l'édition. */
.af-piles .af-row__text{
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
	overflow:hidden;
}


/* La barre de pages se colle en bas de la pile, quelle que soit la hauteur du
   contenu : les quatre barres s'alignent d'une pile à l'autre. */
.af-pager{margin-top:auto}
.af-pile__vide{margin-top:auto;margin-bottom:auto}

/* ── Respiration des lignes ───────────────────────────────────────────────────
   J'avais trop resserré en cherchant à faire tenir la page : les lignes
   paraissaient tassées. On rend de l'air vertical ; le nombre de lignes par
   pile s'ajuste tout seul, mieux vaut deux lignes lisibles que trois serrées. */
.af-piles .af-row,
.af-piles .af-prow{padding-top:.72rem;padding-bottom:.72rem}
.af-piles .af-row{gap:6px 10px}
.af-piles .af-row__text{margin-top:.28rem;line-height:1.45}
.af-row__bas{margin-top:.3rem}
.af-piles .af-row__top{gap:.5rem}
.af-piles .af-prow__lbl{line-height:1.4}
.af-piles .af-prow__who{display:inline-block;margin-top:.15rem}

/* Le sous-titre listait « tâches, relances, pièces et SAV » : les quatre piles
   le disent déjà, en plus précis (avec leurs compteurs). On récupère la place. */
.af-page > .as-space-header .as-space-subtitle{display:none}
.af-page > .as-space-header{margin-bottom:6px}

/* ── Derniers pixels : on rogne la structure, jamais le contenu ───────────────
   Les lignes gardent leur respiration ; ce qu'on récupère vient des marges de
   page, des en-têtes de pile et de la barre de pages. */
/* 1. La zone de contenu respire moins haut et bas sur cette vue (-24px). */
.as-content:has(> .af-page){padding-top:20px;padding-bottom:16px}
/* 2. Titre de page plus ramassé (-14px). */
.af-page > .as-space-header{margin-bottom:4px}
.af-page > .as-space-header h1{font-size:1.6rem;line-height:1.15}
/* 3. En-tête de pile (-10px sur les deux rangées). */
.af-pile__hd{padding:.38rem .85rem}
/* 4. Barre de pages (-10px sur les deux rangées). */
.af-pager{padding:.24rem 1rem}
.af-pager__btn{width:21px;height:21px}
/* 5. Espace entre les rangées de piles (-6px). */
.af-piles{gap:12px}

/* 6. Le titre « Suivi » est déjà affiché par la barre du haut de l'espace : le
   répéter en gros consomme 50px pour ne rien apprendre. On le garde dans le
   flux pour les lecteurs d'écran, mais on ne le dessine plus ; les deux boutons
   remontent sur une ligne fine au-dessus des piles. */
.af-page > .as-space-header{
	display:flex;align-items:center;justify-content:flex-end;
	margin-bottom:8px;min-height:0;
}
.af-page > .as-space-header__titles,
.af-page > .as-space-header .as-space-header__titles{
	position:absolute;width:1px;height:1px;overflow:hidden;
	clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* 7. « Nouvelle tâche » fait doublon avec les « + Ajouter » de chaque pile, qui
   pré-règlent en plus la bonne nature. On ne garde que « Voir tout », sur une
   ligne fine : la ligne d'outils passe de 48px à 26px. */
.af-page > .as-space-header{margin-bottom:6px}
.af-page > .as-space-header .af-cta{gap:6px}
.af-page > .as-space-header .af-cta #af-new{display:none}
.af-page > .as-space-header .af-cta .as-btn{
	padding:.22rem .55rem;font-size:.78rem;line-height:1.3;
}

/* ── Deux alignements qui trahissent le travail bâclé ─────────────────────────
   1. La vignette d'une pièce doit se caler en HAUT, sur la première ligne de
      texte, comme dans les autres piles — centrée, elle tombait sous le libellé. */
.af-piles .af-prow{align-items:start}
.af-prow__ico{margin-top:2px}
.af-piles .af-prow__st{align-self:start}

/* 2. Les en-têtes de pile doivent avoir la MÊME hauteur d'une pile à l'autre :
      leurs contenus de droite diffèrent (un bouton, un simple texte, rien), donc
      le trait sous le titre tombait à des niveaux différents entre Pièces et SAV.
      Hauteur minimale commune, et les contenus de droite alignés au centre. */
.af-pile__hd{min-height:45px}
.af-pile__hd > *:last-child{align-self:center}
.af-pile__add{line-height:1.2}

/* Filet de sécurité : un emplacement de nom resté vide ne doit pas réserver une
   ligne entière (23px par ligne, soit près de 100px sur une pile de quatre). */
.af-prow__who:empty{display:none}
.af-row__meta:empty{display:none}

/* ── Les lignes se partagent la hauteur de la pile ────────────────────────────
   Les piles font toutes la même hauteur, mais leurs lignes n'ont pas la même
   taille : celles d'une pile aux lignes courtes laissaient un grand vide sous la
   dernière. Les lignes visibles s'étirent donc à parts égales pour combler.
   (Les lignes masquées par la pagination sont en display:none, elles ne
   participent pas au partage.) */
.af-pile > .af-row,
.af-pile > .af-prow{flex:1 1 auto}
/* Contenu recentré dans une ligne devenue plus haute que son texte. */
.af-piles .af-prow{align-items:center}
.af-prow__ico{align-self:center}
.af-piles .af-prow__st{align-self:center}

/* Pièce orpheline (anomalie de données) : visible, pas masquée. */
.af-prow__who--orphelin{color:#B4302B;font-style:italic}

/* En-tête de pile : la mention « n à commander » et le bouton d'ajout cohabitent
   à droite du titre. */
.af-pile__hdr-droite{display:inline-flex;align-items:center;gap:.55rem;flex:none}
/* Le titre cède la place plutôt que de passer sur deux lignes : sinon l'en-tête
   des Pièces grandit et son trait ne tombe plus au niveau des trois autres. */
.af-pile__hd{flex-wrap:nowrap}
.af-pile__hd h2{min-width:0;flex-wrap:nowrap}
.af-pile__hd h2 > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.af-pile__note{white-space:nowrap}


/* ============================================================
   VOLET D'AJOUT (glisse depuis la droite)
   Même geste que la fiche client et la fiche RDV : la page reste derrière,
   les quatre piles ne disparaissent pas pendant la saisie.
   ============================================================ */
.af-volet-scrim{
	position:fixed;inset:0;background:rgba(5,13,16,.5);z-index:1000;
	opacity:0;transition:opacity .25s var(--as-ease);
}
.af-volet-scrim.is-open{opacity:1}
.af-volet-scrim[hidden]{display:none}
body.af-volet-lock{overflow:hidden}

.af-volet{
	position:fixed;top:0;right:0;bottom:0;width:min(420px,100%);z-index:1001;
	background:var(--sp-white);border-left:1px solid var(--sp-gray2);
	box-shadow:-16px 0 40px -12px rgba(5,13,16,.4);
	display:flex;flex-direction:column;
	transform:translateX(100%);visibility:hidden;
	transition:transform .3s var(--as-ease), visibility .3s;
}
.af-volet.is-open{transform:none;visibility:visible}
.af-volet__top{
	display:flex;align-items:baseline;gap:.7rem;flex:none;
	padding:14px 16px;border-bottom:2px solid var(--sp-dark);
	background:var(--sp-page-creuse);
}
.af-volet__num{
	font-family:'Courier Prime',monospace;font-weight:700;font-size:.62rem;
	letter-spacing:.08em;text-transform:uppercase;color:var(--sp-gray5);
}
.af-volet__titre{
	font-family:'Archivo',sans-serif;font-weight:800;font-size:1.02rem;
	letter-spacing:-.01em;color:var(--sp-gray7);margin:0;
}
.af-volet__close{
	margin-left:auto;align-self:center;background:none;border:0;cursor:pointer;
	color:var(--sp-gray6);padding:.3rem;border-radius:var(--sp-radius);line-height:0;
}
.af-volet__close:hover{background:rgba(20,30,29,.06);color:var(--sp-gray7)}
.af-volet__close svg{width:19px;height:19px}
.af-volet__body{flex:1;overflow-y:auto;padding:16px}

/* Dans le volet, le formulaire n'a plus besoin de son propre cadre. */
.af-volet .af-newform{
	background:none;border:0;box-shadow:none;padding:0;margin:0;
}
.af-volet .af-newform__grid{grid-template-columns:1fr;gap:14px}
.af-volet .af-newform__act{margin-top:18px}
.af-volet .af-field{display:block;margin-bottom:14px}
.af-volet .af-field > span{
	display:block;margin-bottom:.3rem;
	font-family:'Courier Prime',monospace;font-size:.64rem;font-weight:700;
	letter-spacing:.07em;text-transform:uppercase;color:var(--sp-gray5);
}
.af-volet .af-field input,
.af-volet .af-field select,
.af-volet .af-field textarea{width:100%;box-sizing:border-box}

/* La barre d'admin WordPress passe devant : le volet commence dessous. */
body.admin-bar .af-volet{top:32px}
@media screen and (max-width:782px){
	body.admin-bar .af-volet{top:46px}
}
@media (max-width:640px){
	.af-volet{width:100%}
}


/* Retour au suivi : un vrai bouton, pas un lien souligne perdu en haut de page. */
.af-retour{margin:0 0 14px}
.af-retour__btn{
	display:inline-flex;align-items:center;gap:.4rem;
	font-family:'Archivo',sans-serif;font-weight:600;font-size:.82rem;
	text-decoration:none;border-radius:var(--sp-radius);
	padding:.45rem .7rem;
}
.af-retour__btn svg{width:15px;height:15px}


/* ============================================================
   Cibles tactiles : minimum 24x24 (WCAG 2.2, critere « Target Size »).
   La case a cocher faisait 22px et le bouton d'echeance 17px de haut :
   jouable a la souris, penible au doigt sur un chantier. La surface
   cliquable grandit sans que le dessin change (l'encart garde sa taille,
   c'est la zone autour qui s'etend).
   ============================================================ */
.af-tick{
	position:relative;
}
.af-tick::after{
	content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	width:26px;height:26px;
}
.af-due__ouvrir{
	position:relative;
}
.af-due__ouvrir::after{
	content:'';position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
	height:26px;
}