/**
 * Onglet SAV — garanties + retours. Rendu dans la coque de l'espace pro (tokens
 * --sp-* / --as-* hérités). Même grammaire que les fiches (barre de couleur).
 */

.sv-page{ max-width:1240px; }
.sv-page{
	--ok:#10b981;
	--soon:var(--sp-amber,#e0891d);
	--exp:#9ca3af;
	--open:#dc2626;
}

.sv-muted{ color:var(--sp-gray5); font-size:.88rem; padding:6px 0; }
.sv-empty{ text-align:center; padding:48px 24px; color:var(--sp-gray5); }

/* Sections */
.sv-section{ margin-bottom:26px; }
.sv-section__head{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.sv-section__head h2{ font-size:1.05rem; font-weight:700; color:var(--sp-dark); margin:0; }
.sv-count{ font-size:.72rem; font-weight:800; color:#fff; border-radius:9px; padding:0 7px; line-height:18px; }
.sv-count--open{ background:var(--open); }
.sv-count--war{ background:var(--sp-gray4); }
.sv-spacer{ flex:1; }
.sv-search{ display:flex; align-items:center; gap:8px; background:var(--sp-white); border:1px solid var(--as-line-2); border-radius:10px; padding:7px 11px; width:280px; max-width:50vw; }
.sv-search svg{ width:16px; height:16px; color:var(--sp-gray5); flex:none; }
.sv-search input{ border:none; outline:none; font:inherit; font-size:.86rem; width:100%; background:none; color:var(--sp-dark); }

/* Cartes retour */
.sv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px; align-items:start; }
.sv-ret{ background:var(--as-surface); border:1px solid var(--as-line-2); border-left:4px solid var(--open); border-radius:13px; box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 22px -12px rgba(16,24,40,.18); overflow:hidden; }
.sv-ret__head{ display:flex; align-items:center; gap:11px; padding:14px 16px 10px; }
.sv-ret__av{ width:40px; height:40px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.85rem; color:#fff; background:var(--open); }
.sv-ret__id{ min-width:0; flex:1; }
.sv-ret__id b{ display:block; font-size:.96rem; font-weight:700; color:var(--sp-dark); }
.sv-ret__id span{ display:block; font-size:.8rem; color:var(--sp-gray5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-pill{ font-size:.7rem; font-weight:700; padding:4px 9px; border-radius:100px; white-space:nowrap; text-transform:uppercase; letter-spacing:.03em; }
.sv-pill--open{ background:#fde8e8; color:#b91c1c; }
.sv-ret__body{ padding:0 16px 12px; }
.sv-eyebrow{ font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sp-gray5); margin-bottom:3px; }
.sv-ret__pb{ font-size:.9rem; color:var(--sp-gray7); margin:0 0 10px; line-height:1.45; }
.sv-ref{ display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--sp-gray6); background:var(--sp-off); border:1px solid var(--sp-gray2); border-radius:9px; padding:8px 10px; }
.sv-ref svg{ width:15px; height:15px; color:var(--sp-gray5); flex:none; }
.sv-cov{ margin-left:auto; font-size:.7rem; font-weight:700; padding:3px 8px; border-radius:100px; white-space:nowrap; }
.sv-cov--in{ background:#e6f6ee; color:#067a52; }
.sv-cov--out{ background:#f1f3f5; color:var(--sp-gray5); }
.sv-ret__foot{ display:flex; align-items:center; gap:8px; padding:12px 16px 14px; border-top:1px solid var(--sp-gray1); flex-wrap:wrap; }
.sv-ret__foot .as-btn--nav{ margin-left:auto; }

/* Liste garanties */
.sv-list{ display:flex; flex-direction:column; gap:9px; }
.sv-war{ display:flex; align-items:center; gap:13px; background:var(--as-surface); border:1px solid var(--as-line-2); border-left:4px solid var(--ok); border-radius:12px; padding:12px 15px; box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 18px -12px rgba(16,24,40,.16); }
.sv-war--soon{ border-left-color:var(--soon); }
.sv-war--exp{ border-left-color:var(--exp); }
.sv-war__ico{ width:38px; height:38px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--sp-off); color:var(--sp-gray5); }
.sv-war__ico svg{ width:19px; height:19px; }
.sv-war__main{ min-width:0; flex:1; }
.sv-war__main b{ display:block; font-size:.93rem; font-weight:700; color:var(--sp-dark); }
.sv-war__client{ font-weight:500; color:var(--sp-gray5); }
.sv-war__sub{ display:block; font-size:.78rem; color:var(--sp-gray5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sv-war__right{ text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
.sv-war__dates{ font-size:.78rem; color:var(--sp-gray6); white-space:nowrap; }
.sv-war__pill{ font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:100px; text-transform:uppercase; letter-spacing:.03em; }
.sv-war__pill--ok{ background:#e6f6ee; color:#067a52; }
.sv-war__pill--soon{ background:var(--sp-amber-soft,#fef3c7); color:var(--sp-amber-deep,#b45309); }
.sv-war__pill--exp{ background:#f1f3f5; color:var(--sp-gray5); }
.sv-war__ret{ flex:none; }
.sv-war__act{ flex:none; display:flex; align-items:center; gap:6px; }
.sv-war__icon{ width:30px; height:30px; flex:none; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--as-line-2); background:var(--sp-white); border-radius:8px; color:var(--sp-gray5); cursor:pointer; }
.sv-war__icon:hover{ border-color:var(--sp-gray3); color:var(--sp-dark); }
.sv-war__icon svg{ width:15px; height:15px; }
.sv-war__icon--del:hover{ background:#fde8e8; border-color:#f5c2c2; color:#dc2626; }
@media(max-width:600px){ .sv-war{ flex-wrap:wrap; } .sv-war__act{ width:100%; } .sv-war__ret{ flex:1; justify-content:center; } }

/* Modales */
.sv-modal{ position:fixed; inset:0; z-index:100000; display:none; overflow-y:auto; }
.sv-modal.is-open{ display:block; }
.sv-modal__scrim{ position:fixed; inset:0; background:rgba(16,24,40,.45); }
.sv-modal__card{ position:relative; z-index:1; margin:40px auto; background:var(--sp-white); border-radius:16px; box-shadow:0 16px 50px rgba(15,23,42,.28); padding:22px 24px; width:520px; max-width:92vw; }
.sv-modal__card h2{ font-size:1.1rem; font-weight:700; color:var(--sp-dark); margin:0 0 16px; }
.sv-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sv-field{ display:block; margin-bottom:12px; }
.sv-field--full{ grid-column:1 / -1; }
.sv-field span{ display:block; font-size:.8rem; font-weight:600; color:var(--sp-gray5); margin-bottom:5px; }
.sv-field input, .sv-field select, .sv-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); }
.sv-field input:focus, .sv-field select:focus, .sv-field textarea:focus{ outline:none; border-color:var(--sp-amber); box-shadow:0 0 0 3px var(--sp-amber-ring); }
.sv-dur{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.sv-chip{ font:inherit; font-size:.8rem; font-weight:600; padding:6px 12px; border-radius:100px; border:1px solid var(--as-line-2); background:var(--sp-white); color:var(--sp-gray6); cursor:pointer; }
.sv-chip.is-active{ border-color:var(--sp-amber); background:var(--sp-amber-soft,#fef3c7); color:var(--sp-amber-deep,#b45309); }
.sv-ret-ctx{ font-size:.86rem; color:var(--sp-gray6); background:var(--sp-off); border:1px solid var(--sp-gray2); border-radius:9px; padding:9px 11px; margin:0 0 12px; }
.sv-modal__err{ color:#dc2626; font-size:.83rem; margin:0 0 12px; }
.sv-modal__act{ display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }
@media(max-width:600px){ .sv-grid2{ grid-template-columns:1fr; } }

/* ============================================================
   SAV (rework carnet) : radius carnet + fond papier (tokens --sp-*).
   ============================================================ */
.sv-ret, .sv-war{ border-radius:var(--sp-radius); background:var(--sp-white); border-color:var(--sp-gray2); border-left-width:3px; box-shadow:var(--as-shadow); }
.sv-search, .sv-ref, .sv-ret-ctx{ border-radius:var(--sp-radius); }
.sv-field input, .sv-field select, .sv-field textarea{ border-radius:var(--sp-radius); }
.sv-war__ico, .sv-war__icon{ border-radius:var(--sp-radius); }
.sv-modal__card{ border-radius:var(--sp-radius); }

/* ============================================================
   SAV : passe carnet (2) — vocabulaire d'état et couleurs de la palette.
   Les pilules très arrondies aux fonds pastel et le bleu de « Planifier la
   réparation » venaient d'un autre monde graphique. On reprend les codes déjà
   employés partout dans l'espace : étiquette encrée à coin franc en Courier
   majuscule, gommettes de la palette, violet tampon pour l'action.
   ============================================================ */
:root{
	--ok:   var(--sp-g-verte);
	--open: #B4302B;
}
/* Étiquettes d'état : le motif « cachet » de la Suite, pas la pilule pastel. */
.sv-pill, .sv-cov, .sv-war__pill{
	font-family:'Courier Prime',monospace;
	font-weight:700; font-size:.58rem;
	letter-spacing:.04em; text-transform:uppercase;
	border-radius:2px;
	padding:.18em .45em;
	border:1px solid transparent;
}
.sv-pill--open{
	background:color-mix(in srgb, #B4302B 10%, transparent);
	border-color:color-mix(in srgb, #B4302B 32%, transparent);
	color:#B4302B;
}
.sv-cov--in, .sv-war__pill--ok{
	background:color-mix(in srgb, var(--sp-g-verte) 14%, transparent);
	border-color:color-mix(in srgb, var(--sp-g-verte) 38%, transparent);
	color:#0d6b4a;
}
.sv-cov--out, .sv-war__pill--exp{
	background:var(--sp-off);
	border-color:var(--sp-gray3);
	color:var(--sp-gray5);
}
/* Compteurs de section : petite étiquette encrée, pas une gommette pleine de
   couleur vive. Le rouge reste celui de la palette, jamais un rouge d'alerte. */
.sv-count{
	font-family:'Courier Prime',monospace;
	font-weight:700; font-size:.62rem;
	border-radius:2px; padding:.1em .4em; line-height:1.5;
	border:1px solid transparent;
}
.sv-count--open{
	background:color-mix(in srgb, #B4302B 10%, transparent);
	border-color:color-mix(in srgb, #B4302B 32%, transparent);
	color:#B4302B;
}
.sv-count--war{
	background:var(--sp-off);
	border-color:var(--sp-gray3);
	color:var(--sp-gray5);
}
/* L'action principale porte le violet tampon, comme partout ailleurs. */
.sv-ret__foot .as-btn--nav{ color:var(--sp-amber); border-color:var(--sp-gray3); }
.sv-ret__foot .as-btn--nav:hover{ border-color:var(--sp-amber); }
/* Pastille d'initiales : coin franc plutôt que rond parfait, ton de la palette. */
.sv-ret__av{
	border-radius:var(--sp-radius);
	background:var(--sp-amber);
	color:var(--sp-on-accent);
	font-family:'Archivo',sans-serif;
}
/* Référence de pièce : même creux que les champs du reste de l'espace. */
.sv-ref{ background:var(--sp-off); border-color:var(--sp-gray3); }
.sv-war__ico{ background:var(--sp-off); border:1px solid var(--sp-gray2); }


/* ============================================================
   SAV : passe carnet (3) — les cartes de retour.
   Elles restaient dessinées comme des cartes d'application : coins ronds,
   ombre portée, en-tête sans trait, et un pied qui débordait sur trois lignes
   (la croix de suppression tombait seule en dessous). On les ramène au dessin
   des piles du Suivi : bandeau de tête encré, corps sur papier, pied sur un
   seul rang, et toutes les cartes d'une rangée à la même hauteur.
   ============================================================ */

/* 1. Rangées régulières : les cartes s'étirent au lieu de flotter à leur
      hauteur de contenu, ce qui alignait mal les pieds d'une carte à l'autre. */
.sv-grid{
	grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
	align-items:stretch;grid-auto-rows:1fr;gap:14px;
}
.sv-ret{display:flex;flex-direction:column;overflow:hidden}
/* Le filet de gauche marque l'état, comme les lignes des piles du Suivi. Il
   avait été neutralisé par la passe précédente (couleur posée sur les quatre
   côtés à la fois), la carte n'avait plus de repère d'état sur son flanc. */
.sv-ret{border-left-color:#B4302B}

/* 2. Bandeau de tête : même facture que l'en-tête d'une pile du Suivi. */
.sv-ret__head{
	background:var(--sp-page-creuse);
	border-bottom:2px solid var(--sp-dark);
	padding:.62rem .85rem;gap:.6rem;align-items:center;
}
.sv-ret__av{
	width:34px;height:34px;font-size:.72rem;font-weight:800;letter-spacing:.02em;
}
.sv-ret__id b{
	font-family:'Archivo',sans-serif;font-weight:800;font-size:.92rem;
	letter-spacing:-.01em;color:var(--sp-gray7);
}
.sv-ret__id span{
	font-family:'Courier Prime',monospace;font-size:.66rem;color:var(--sp-gray5);
}

/* 3. Corps : la date en Courier comme partout, le texte du problème qui
      occupe la place restante, la référence de garantie posée en bas. */
.sv-ret__body{
	flex:1;display:flex;flex-direction:column;
	padding:.8rem .85rem .85rem;gap:.45rem;
}
.sv-eyebrow{
	font-family:'Courier Prime',monospace;font-weight:700;font-size:.62rem;
	letter-spacing:.07em;color:var(--sp-gray5);margin:0;
}
.sv-ret__pb{font-size:.92rem;line-height:1.45;margin:0}
.sv-ref{margin-top:auto;font-size:.76rem;padding:.45rem .55rem;gap:.45rem}
.sv-ref svg{width:14px;height:14px}

/* 4. Pied sur un seul rang : la croix ne tombe plus seule à la ligne. */
.sv-ret__foot{
	flex-wrap:nowrap;gap:.5rem;padding:.6rem .85rem;
	border-top:1px solid var(--sp-gray2);
}
.sv-ret__foot .as-btn{
	font-family:'Archivo',sans-serif;font-weight:600;font-size:.78rem;
	padding:.42rem .62rem;border-radius:var(--sp-radius);
	white-space:nowrap;min-width:0;
}
.sv-ret__foot .as-btn svg{width:14px;height:14px}
.sv-ret__foot .as-btn--nav{margin-left:0}
.sv-ret__foot .sv-war__icon--del{margin-left:auto;flex:none;width:28px;height:28px}
.sv-ret__foot .sv-war__icon--del svg{width:14px;height:14px}
.sv-ret__foot .sv-war__icon--del:hover{color:#B4302B;border-color:color-mix(in srgb,#B4302B 40%,transparent)}

/* 5. Titre de section au vocabulaire du carnet. */
.sv-section__head h2{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.01em}


/* ============================================================
   SAV : passe carnet (4) — les deux boîtes de saisie deviennent des volets.
   « Nouvelle garantie » et « Signaler un retour » s'ouvraient en fenêtre
   centrée, qui masque la liste pendant la saisie. Même geste que partout
   ailleurs dans l'espace : un volet glisse depuis la droite, la page reste
   visible derrière. Le JS n'a pas bougé (il pose toujours `.is-open` et
   ferme sur `[data-sv-close]` ou Échap).
   ============================================================ */
.sv-modal{overflow:visible}
.sv-modal__scrim{background:rgba(5,13,16,.5)}

.sv-modal__card{
	position:fixed;top:0;right:0;bottom:0;left:auto;
	margin:0;padding:0;
	width:min(460px,100%);max-width:none;
	border-radius:0;border-left:1px solid var(--sp-gray2);
	box-shadow:-16px 0 40px -12px rgba(5,13,16,.4);
	display:flex;flex-direction:column;
	animation:svVoletIn .28s var(--as-ease);
}
@keyframes svVoletIn{ from{ transform:translateX(100%); } to{ transform:none; } }
/* La barre d'admin WordPress passe devant : le volet commence dessous. */
body.admin-bar .sv-modal__card{top:32px}
@media screen and (max-width:782px){ body.admin-bar .sv-modal__card{top:46px} }

/* Bandeau de tête, comme les piles du Suivi et le volet d'ajout. */
.sv-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);
}
.sv-volet__num{
	font-family:'Courier Prime',monospace;font-weight:700;font-size:.62rem;
	letter-spacing:.08em;text-transform:uppercase;color:var(--sp-gray5);
}
.sv-modal__card h2{
	font-family:'Archivo',sans-serif;font-weight:800;font-size:1.02rem;
	letter-spacing:-.01em;color:var(--sp-gray7);margin:0;
}
.sv-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;
}
.sv-volet__close:hover{background:rgba(20,30,29,.06);color:var(--sp-gray7)}
.sv-volet__close svg{width:19px;height:19px}

/* Corps défilant : seuls les champs défilent, jamais la page derrière. */
.sv-modal__card form{
	flex:1;min-height:0;overflow-y:auto;padding:16px;
}
/* Les deux boutons restent visibles en bas, même sur un formulaire long. */
.sv-modal__act{
	position:sticky;bottom:-16px;z-index:1;
	margin:18px -16px -16px;padding:12px 16px;
	background:var(--sp-white);border-top:1px solid var(--sp-gray2);
}

/* Libellés et champs au vocabulaire du carnet. */
.sv-field span{
	font-family:'Courier Prime',monospace;font-size:.64rem;font-weight:700;
	letter-spacing:.07em;text-transform:uppercase;color:var(--sp-gray5);
}
.sv-field input, .sv-field select, .sv-field textarea{border-color:var(--sp-gray3)}
.sv-chip{border-radius:var(--sp-radius);border-color:var(--sp-gray3);font-size:.78rem}
.sv-chip.is-active{
	border-color:var(--sp-amber);
	background:color-mix(in srgb, var(--sp-amber) 12%, transparent);
	color:var(--sp-amber);
}

@media (max-width:640px){
	.sv-modal__card{width:100%}
	.sv-grid2{grid-template-columns:1fr 1fr}
}

/* Le formulaire du volet occupe toute la hauteur : quand il est court, les deux
   boutons se posent en bas du volet au lieu de flotter au milieu ; quand il est
   long, ils restent collants au bas de la zone qui defile. */
.sv-modal__card form{display:flex;flex-direction:column}
.sv-modal__card form > *{flex:none}
.sv-modal__act{margin-top:auto}